From f3b781a3603f8293a60f10abc5ff29a7240c0882 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Mon, 18 Aug 2025 15:38:44 -0500
Subject: [PATCH] Add filtering functionality to dropdown component

---
 inventory/static/js/dropdown.js                  | 16 ++++++++++++++++
 .../templates/fragments/_dropdown_fragment.html  |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/inventory/static/js/dropdown.js b/inventory/static/js/dropdown.js
index 9d4bde6..e4f3441 100644
--- a/inventory/static/js/dropdown.js
+++ b/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');
+                }
+            });
         }
     };
 }
diff --git a/inventory/templates/fragments/_dropdown_fragment.html b/inventory/templates/fragments/_dropdown_fragment.html
index b192d54..e3c3fae 100644
--- a/inventory/templates/fragments/_dropdown_fragment.html
+++ b/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 %}