add simple search

Tobi-De · Jun 20, 2024 · 5386dcf · 5386dcf
1 parent 23959c2
commit 5386dcf
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/content/index.md b/content/index.md
@@ -1,9 +1,16 @@
-<table role="grid">
+<input
+  id="searchInput"
+  type="search"
+  name="search"
+  placeholder="Search"
+  aria-label="Search"
+/>
+<table role="grid" id="extensionsTable">
   <thead>
     <tr>
       <th scope="col">Name</th>
       <th scope="col">Description</th>
-      <th scope="col">Official</th>
+      <th scope="col">Core</th>
       <th scope="col">Download</th>
     </tr>
   </thead>

diff --git a/templates/coltrane/base.html b/templates/coltrane/base.html
@@ -31,7 +31,7 @@
 <body>
     <header class="container">
         <h1>Htmx Extensions</h1>
-        <h2>A registry of htmx extensions, both official and third-party.</h2>
+        <h2>A registry of htmx extensions, core and community.</h2>
         <p>Add a new extension by making a pull request to the <a
                 href="https://github.com/Tobi-De/htmx_extensions/blob/main/data/extensions.json">github repository</a>
         </p>
@@ -65,6 +65,20 @@ <h2>A registry of htmx extensions, both official and third-party.</h2>
                 })
                 .catch(() => alert('oh no!'));
         }
+        document.getElementById('searchInput').addEventListener('keyup', function() {
+            var searchQuery = this.value.toLowerCase();
+            var tableRows = document.querySelectorAll('#extensionsTable tbody tr');
+
+            tableRows.forEach(function(row) {
+              var nameCellText = row.cells[0].textContent.toLowerCase();
+              var descriptionCellText = row.cells[1].textContent.toLowerCase();
+              if (nameCellText.includes(searchQuery) || descriptionCellText.includes(searchQuery)) {
+                row.style.display = ''; // Show row
+              } else {
+                row.style.display = 'none'; // Hide row
+              }
+            });
+          });
     </script>
 </body>