yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add filtering functionality to dropdown component

Browse source
This commit is contained in:
Yaro Kasear 2025-08-18 15:38:44 -05:00
parent 32993800fe
commit f3b781a360
2 changed files with 17 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

16
inventory/static/js/dropdown.js
View file

@ -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');
}
});
}
};
}

2
inventory/templates/fragments/_dropdown_fragment.html
View file

@ -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 %}