Debounce filter so it feels snappier

app/javascript/controllers/filteredlist_controller.js

 import { Controller } from "@hotwired/stimulus";
 
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
 export default class extends Controller {
   static targets = ["input", "list"];
 
   connect() {
-    //this.options = Array.from(this.listTarget.children)
+    this.filter = debounce(this.filter_nodebounce.bind(this), 300);
   }
 
-  filter() {
-    const query = this.inputTarget.value.toLowerCase()
+  filter_nodebounce() {
+    const query = this.inputTarget.value.toLowerCase();
     // Filter options by the `data-filteredlist-match` attribute
     for (const option of this.listTarget.children) {
       if (option.dataset.filteredlistMatch.includes(query)) {
-        option.classList.remove("hidden")
+        option.classList.remove("hidden");
       } else {
-        option.classList.add("hidden")
+        option.classList.add("hidden");
       }
     }
   }