From a2f8652575dc5dcd7c3b519e637ef302fb4bc671 Mon Sep 17 00:00:00 2001
From: Khalid Abuhakmeh <khalidabuhakmeh@gmail.com>
Date: Thu, 1 Oct 2020 15:52:52 -0400
Subject: [PATCH] Add Search To Emoji Page

This adds a typeahead search feature
for the very large emoji table. It filters as you type to find if an emoji exists or not.

The JavaScript could be adapted to work on all tables in the future.
---
 docs/input/appendix/emojis.md              | 14 +++++++++-
 docs/input/assets/js/emoji-search.js       | 30 ++++++++++++++++++++++
 docs/src/Shortcodes/EmojiTableShortcode.cs |  8 +++---
 3 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 docs/input/assets/js/emoji-search.js

diff --git a/docs/input/appendix/emojis.md b/docs/input/appendix/emojis.md
index 9736348..364ffc9 100644
--- a/docs/input/appendix/emojis.md
+++ b/docs/input/appendix/emojis.md
@@ -35,4 +35,16 @@ var rendered = Emoji.Replace(phrase);
 _The images in the table below might not render correctly in your 
 browser for the same reasons mentioned in the `Compatibility` section._
 
-<?# EmojiTable /?>
\ No newline at end of file
+<div class="mb-3">
+    <div class="form-inline d-flex">
+      <i class="fas fa-search" aria-hidden="true"></i>
+      <input id="emoji-search" 
+        class="form-control form-control-sm ml-3 w-75" 
+        type="text" placeholder="Search Emojis..." autocomplete="off" 
+        aria-label="Search Emojis">
+    </div> 
+</div>
+
+<?# EmojiTable /?>
+
+<script type="text/javascript" src="../assets/js/emoji-search.js"></script>
\ No newline at end of file
diff --git a/docs/input/assets/js/emoji-search.js b/docs/input/assets/js/emoji-search.js
new file mode 100644
index 0000000..f0b82d3
--- /dev/null
+++ b/docs/input/assets/js/emoji-search.js
@@ -0,0 +1,30 @@
+$(document).ready(function () {
+    let input = document.getElementById('emoji-search');
+    let table = document.getElementById('emoji-results');
+
+    input.onkeyup = function (event) {
+
+        if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+
+        let value = input.value.toUpperCase();
+        let rows = table.getElementsByClassName('emoji-row');
+
+        for (let i = 0; i < rows.length; i++) {
+            let row = rows[i];
+
+            let match =
+                new RegExp(value, "i").test(row.textContent) ||
+                value === '';
+
+            if (match) {
+                row.style.display = 'table-row';
+            } else {
+                row.style.display = 'none';
+            }
+        }
+    }; // keyup
+}); // ready
\ No newline at end of file
diff --git a/docs/src/Shortcodes/EmojiTableShortcode.cs b/docs/src/Shortcodes/EmojiTableShortcode.cs
index 8c26f59..bc87260 100644
--- a/docs/src/Shortcodes/EmojiTableShortcode.cs
+++ b/docs/src/Shortcodes/EmojiTableShortcode.cs
@@ -18,8 +18,8 @@ namespace Docs.Shortcodes
                 .First().Object;
 
             // Headers
-            var table = new XElement("table", new XAttribute("class", "table"));
-            var header = new XElement("tr", new XAttribute("class", "emoji-row"));
+            var table = new XElement("table", new XAttribute("class", "table"), new XAttribute("id", "emoji-results"));
+            var header = new XElement("tr", new XAttribute("class", "emoji-row-header"));
             header.Add(new XElement("th", ""));
             header.Add(new XElement("th", "Markup"));
             header.Add(new XElement("th", "Constant"));
@@ -28,9 +28,9 @@ namespace Docs.Shortcodes
             foreach (var emoji in emojis)
             {
                 var code = emoji.Code.Replace("U+0000", "U+").Replace("U+000", "U+");
-                var icon = string.Format("&#x{0};", emoji.Code.Replace("U+", string.Empty));
+                var icon = $"&#x{emoji.Code.Replace("U+", string.Empty)};";
 
-                var row = new XElement("tr");
+                var row = new XElement("tr", new XAttribute("class", "emoji-row"));
                 row.Add(new XElement("td", icon));
                 row.Add(new XElement("td", new XElement("code", $":{emoji.Id}:")));
                 row.Add(new XElement("td", new XElement("code", emoji.Name)));