[TASK] add quick search index

2024-02-21 14:39:20 +01:00
parent e7405c4edb
commit b2d1995085
3 changed files with 39 additions and 1 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,6 +3,13 @@
    <body>
 	{{header}}
        <main class="container">
+            <input
+              id="filter-js"
+              type="search"
+              name="search"
+              placeholder="Suchen"
+              aria-label="Suchen"
+            />
            <ol>
                {{content}}
            </ol>
--- a/templates/static/app.js
+++ b/templates/static/app.js
@@ -2,8 +2,39 @@ document.addEventListener("DOMContentLoaded", function () {
    changeTheme();
    initcolorTheme();
    apply_stickies();
+    initSearch();
 });

+function initSearch() {
+  const input = document.querySelector('#filter-js');
+
+  if(input) {
+    filterElements(input.value);
+
+    input.addEventListener('input', () => {
+      filterElements(input.value);
+    });
+  }
+}
+
+function filterElements(input) {
+  const elements = document.querySelectorAll('[data-filterable="true"]');
+
+  Array.prototype.forEach.call(elements, (element) => {
+    // set both strings (input & dataset filter) to lowercase to not be case sensitive
+    let filterString = element.dataset.filter?.toLocaleLowerCase();
+    
+    // bulk hide all elements
+    element.style.display = 'none';
+
+    // show if input matches
+    if(filterString?.includes(input.toLocaleLowerCase())) {
+      element.style.display = 'flex';
+    }
+  });
+}  
+
+
 function changeTheme() {
    let toggleBtn = document.querySelector("#theme-toggle-js");