diff --git a/links/templates/links/tag_list.html b/links/templates/links/tag_list.html index c7e26a6..1a5822e 100644 --- a/links/templates/links/tag_list.html +++ b/links/templates/links/tag_list.html @@ -16,26 +16,39 @@
- -
- {% trans "Sort by:" %} - - {% trans "Name (A-Z)" %} - - - {% trans "Name (Z-A)" %} - - - {% trans "Most Used" %} - - - {% trans "Least Used" %} - + +
+ + + +
+ +
+ +
+
-
+ @@ -191,5 +209,37 @@ myChart.resize(); }); }); + + // Quick filter functionality + document.addEventListener('DOMContentLoaded', function() { + const filterInput = document.getElementById('filter-tags-input'); + const tagItems = document.querySelectorAll('.tag-item'); + const noResultsMessage = document.getElementById('no-results-message'); + + if (filterInput && tagItems.length > 0) { + filterInput.addEventListener('keyup', function() { + const filterTerm = this.value.toLowerCase().trim(); + let visibleCount = 0; + + tagItems.forEach(function(item) { + const tagName = item.getAttribute('data-tag-name'); + + if (tagName && tagName.includes(filterTerm)) { + item.style.display = ''; + visibleCount++; + } else { + item.style.display = 'none'; + } + }); + + // Show/hide no results message + if (visibleCount === 0 && filterTerm.length > 0) { + noResultsMessage.classList.remove('hidden'); + } else { + noResultsMessage.classList.add('hidden'); + } + }); + } + }); {% endblock %}