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

Enhance dropdown functionality by adding onclick event to dropdown items for better item selection; improve search input handling for filtering options.

Browse source
This commit is contained in:
Yaro Kasear 2025-07-22 12:00:27 -05:00
parent 462c077681
commit 69a4a19587
1 changed files with 50 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,18 +7,27 @@
</label> </label>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" <button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown"
data-inv-value="{{ current_item.id if current_item else '' }}" aria-expanded="false"> data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button">
{{ current_item.identifier if current_item else '-' }} {{ current_item.identifier if current_item else '-' }}
</button> </button>
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}"> <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
<ul class="dropdown-menu w-100" id="menu{{ id }}"> <ul class="dropdown-menu w-100" id="menu{{ id }}">
<input type="text" class="form-control" id="search{{ id }}" placeholder="Search..."> <input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
{% for item in list %} {% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}">{{ item.identifier }}</a></li> <li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<script> <script>
function {{ id }}SetButton(id, identifier) {
const button = document.getElementById("{{ id }}Button");
const input = document.getElementById("{{ id }}");
button.dataset.invValue = id;
button.textContent = identifier;
input.value = id;
console.log("Selected {{ id }} ID:", id);
}
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const {{ id }}Dropdown = document.getElementById("menu{{ id }}"); const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
const {{ id }}Input = document.getElementById("{{ id }}"); const {{ id }}Input = document.getElementById("{{ id }}");
@ -31,8 +40,9 @@
}); });
const {{ id }}SearchInput = document.getElementById("search{{ id }}"); const {{ id }}SearchInput = document.getElementById("search{{ id }}");
searchInput.addEventListener("input", () => { console.log({{ id }}SearchInput);
const filter = searchInput.value.toLowerCase(); {{ id }}SearchInput.addEventListener("input", () => {
const filter = {{ id }}SearchInput.value.toLowerCase();
const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item"); const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
items.forEach(item => { items.forEach(item => {
if (item.textContent.toLowerCase().includes(filter)) { if (item.textContent.toLowerCase().includes(filter)) {