create gists

assets/js/hooks/searchable_dropdown.js

@@ -0,0 +1,32 @@
+SearchableDropdown = {
+  mounted() {
+    this.el.addEventListener("input", (e) => {
+      const query = e.target.value.toLowerCase();
+      const dropdownId = this.el.dataset.dropdownId;
+      const optionsContainer = document.querySelector(`#${dropdownId}-options`);
+      const options = optionsContainer.querySelectorAll("li button");
+
+      options.forEach((option) => {
+        const text = option.textContent.toLowerCase();
+        option.parentElement.style.display = text.includes(query)
+          ? "block"
+          : "none";
+      });
+    });
+  },
+};
+
+const DropdownAnimation = {
+  mounted() {
+    this.el.addEventListener("transitionend", (e) => {
+      if (
+        e.propertyName === "opacity" &&
+        this.el.classList.contains("fade-out")
+      ) {
+        this.el.classList.add("hidden");
+      }
+    });
+  },
+};
+
+export { SearchableDropdown, DropdownAnimation };