Generalized Search

Generalized the search to work with any table
with some basic classes and some updated
JavaScript, we can now search colors and emojis.

docs/input/appendix/colors.md

@@ -13,4 +13,19 @@ in markup text such as `AnsiConsole.Markup("[maroon on blue]Hello[/]")`.
 
 # Standard colors
 
-<?# ColorTable /?>
+<div class="input-group mb-3">
+  <div class="input-group-prepend">
+    <span class="input-group-text" id="basic-addon1">
+        <i class="fas fa-search" aria-hidden="true"></i>
+    </span>
+  </div>
+  <input
+    class="form-control w-100 filter"
+    data-table="color-results"
+    type="text" placeholder="Search Colors..." autocomplete="off" 
+    aria-label="Search Colors">
+</div>
+
+<?# ColorTable /?>
+
+<script type="text/javascript" src="../assets/js/table-search.js"></script>

docs/input/appendix/emojis.md

@@ -35,16 +35,19 @@ 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._
 
-<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 class="input-group mb-3">
+  <div class="input-group-prepend">
+    <span class="input-group-text" id="basic-addon1">
+        <i class="fas fa-search" aria-hidden="true"></i>
+    </span>
+  </div>
+  <input
+    class="form-control w-100 filter"
+    data-table="emoji-results"
+    type="text" placeholder="Search Emojis..." autocomplete="off" 
+    aria-label="Search Emojis">
 </div>
 
 <?# EmojiTable /?>
 
-<script type="text/javascript" src="../assets/js/emoji-search.js"></script>
+<script type="text/javascript" src="../assets/js/table-search.js"></script>

docs/input/assets/js/emoji-search.js

@@ -1,30 +0,0 @@
-$(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

docs/input/assets/js/table-search.js

@@ -0,0 +1,35 @@
+$(document).ready(function () {
+
+    $('.filter').each(function () {
+        let input = this;
+        let table = document.getElementById(input.dataset.table);
+
+        input.onkeyup = function (event) {
+
+            if (event.key === "Enter") {
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            }
+
+            let value = input.value.toUpperCase();
+            let rows = table.getElementsByClassName('search-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

docs/src/Shortcodes/ColorTableShortcode.cs

@@ -21,7 +21,7 @@ namespace Docs.Shortcodes
                 .First().Object;
 
             // Headers
-            var table = new XElement("table", new XAttribute("class", "table"));
+            var table = new XElement("table", new XAttribute("class", "table"), new XAttribute("id", "color-results"));
             var header = new XElement("tr", new XAttribute("class", "color-row"));
             header.Add(new XElement("th", ""));
             header.Add(new XElement("th", "#"));
@@ -33,8 +33,8 @@ namespace Docs.Shortcodes
 
             foreach (var color in colors)
             {
-                var rep = new XElement("td", 
-                    new XElement("span", 
+                var rep = new XElement("td",
+                    new XElement("span",
                     new XAttribute("class", "color-representation"),
                     new XAttribute("style", $"background-color:{color.Hex};")));
                 var name = new XElement("td", new XElement("code", color.Number.ToString()));
@@ -44,7 +44,7 @@ namespace Docs.Shortcodes
                 var clr = new XElement("td", new XElement("code", color.ClrName));
 
                 // Create row
-                var row = new XElement("tr");
+                var row = new XElement("tr", new XAttribute("class", "search-row"));
                 row.Add(rep);
                 row.Add(name);
                 row.Add(number);

docs/src/Shortcodes/EmojiTableShortcode.cs

@@ -30,7 +30,7 @@ namespace Docs.Shortcodes
                 var code = emoji.Code.Replace("U+0000", "U+").Replace("U+000", "U+");
                 var icon = $"&#x{emoji.Code.Replace("U+", string.Empty)};";
 
-                var row = new XElement("tr", new XAttribute("class", "emoji-row"));
+                var row = new XElement("tr", new XAttribute("class", "search-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)));