Add filtering functionality to dropdown component

inventory/static/js/dropdown.js

@@ -102,6 +102,22 @@ function DropDown(cfg) {
 
                 requestAnimationFrame(() => search.focus());
             });
+        },
+
+        filterItems() {
+            const search = this.$refs.search;
+            const dropdown = this.$refs.dropdown;
+            const filter = search.value.toLowerCase().trim();
+            const items = dropdown.querySelectorAll('.dropdown-item');
+
+            items.forEach(item => {
+                const text = item.textContent.toLowerCase();
+                if (text.includes(filter)) {
+                    item.classList.remove('d-none');
+                } else {
+                    item.classList.add('d-none');
+                }
+            });
         }
     };
 }

inventory/templates/fragments/_dropdown_fragment.html

@@ -37,7 +37,7 @@
         <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}" x-ref="menu">
             <input type="text"
                 class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input"
-                id="search{{ id }}" placeholder="Search..." x-ref="search">
+                id="search{{ id }}" placeholder="Search..." x-ref="search" @input="filterItems()">
             <div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent" x-ref="content">
                 {% if list %}
                     {% for item in list %}