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

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

@ -1,47 +1,57 @@
{% macro render_dropdown(id, list, label, current_item = None, entry_link = None) %}
<label for="{{ id }}" class="form-label">
{{ label }}
{% if entry_link %}
{{ links.entry_link(entry_link, current_item.id) }}
{% endif %}
</label>
<div class="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">
{{ current_item.identifier if current_item else '-' }}
</button>
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
<ul class="dropdown-menu w-100" id="menu{{ id }}">
<input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
{% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}">{{ item.identifier }}</a></li>
{% endfor %}
</ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
const {{ id }}Input = document.getElementById("{{ id }}");
<label for="{{ id }}" class="form-label">
{{ label }}
{% if entry_link %}
{{ links.entry_link(entry_link, current_item.id) }}
{% endif %}
</label>
<div class="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 '' }}" id="{{ id }}Button">
{{ current_item.identifier if current_item else '-' }}
</button>
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
<ul class="dropdown-menu w-100" id="menu{{ id }}">
<input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
{% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
{% endfor %}
</ul>
</div>
<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);
}
{{ id }}Dropdown.addEventListener("click", (e) => {
if (e.target.tagName === "A") {
{{ id }}Input.value = e.target.dataset.invValue;
console.log("Selected {{ id }} ID:", {{ id }}Input.value);
}
});
document.addEventListener("DOMContentLoaded", () => {
const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
const {{ id }}Input = document.getElementById("{{ id }}");
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
searchInput.addEventListener("input", () => {
const filter = searchInput.value.toLowerCase();
const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
items.forEach(item => {
if (item.textContent.toLowerCase().includes(filter)) {
item.style.display = "";
} else {
item.style.display = "none";
{{ id }}Dropdown.addEventListener("click", (e) => {
if (e.target.tagName === "A") {
{{ id }}Input.value = e.target.dataset.invValue;
console.log("Selected {{ id }} ID:", {{ id }}Input.value);
}
});
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
console.log({{ id }}SearchInput);
{{ id }}SearchInput.addEventListener("input", () => {
const filter = {{ id }}SearchInput.value.toLowerCase();
const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
items.forEach(item => {
if (item.textContent.toLowerCase().includes(filter)) {
item.style.display = "";
} else {
item.style.display = "none";
}
});
});
});
});
</script>
</script>
{% endmacro %}