[IMPROVEMENT] Rewrite filter from jQuery to regular JavaScript #486

promgen/static/js/promgen.js

@@ -31,6 +31,17 @@ function update_page(data) {
   }
 }
 
+// https://blog.bitsrc.io/debounce-understand-and-learn-how-to-use-this-essential-javascript-skill-9db0c9afbfc1
+function debounce(func, delay = 250) {
+  let timerId;
+  return (...args) => {
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}
+
 // Wait until DOM is loaded to add our extra listeners
 document.addEventListener("DOMContentLoaded", function () {
   /*
@@ -45,6 +56,27 @@ document.addEventListener("DOMContentLoaded", function () {
       dstElement.value = srcElement.innerText;
     });
   });
+
+  /*
+  Filter Element
+
+  Example: <input data-filter="div.auto-grid div">
+  */
+  document.querySelectorAll("[data-filter]").forEach(srcElement => {
+    const filterTarget = document.querySelectorAll(srcElement.dataset.filter);
+
+    srcElement.addEventListener(
+      "input",
+      debounce(e => {
+        const search = srcElement.value.toUpperCase();
+        console.debug("Searching for", search);
+        for (const child of filterTarget) {
+          const txt = child.innerText.toUpperCase();
+          child.style.display = txt.indexOf(search) > -1 ? "block" : "none";
+        }
+      })
+    );
+  });
 });
 
 $(document).ready(function() {
@@ -76,12 +108,4 @@ $(document).ready(function() {
       $(this).bootstrapSwitch('state', !state, true);
     }
   });
-
-  $('[data-filter]').change(function(){
-    var search = this.value.toUpperCase();
-    $(this.dataset.filter).each(function(i, ele){
-      var txt = $(this).text().toUpperCase();
-      ele.style.display = txt.indexOf(search) > -1 ? "" : "none"
-    })
-  });
 });