diff --git a/app/javascript/controllers/filteredlist_controller.js b/app/javascript/controllers/filteredlist_controller.js index ef334ef616e23b05daeb1f649e868cd7b871a88b..00f849269f2b2f87d63a20538b9895f6dc764b8b 100644 --- a/app/javascript/controllers/filteredlist_controller.js +++ b/app/javascript/controllers/filteredlist_controller.js @@ -1,20 +1,28 @@ 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"); } } }