diff options
Diffstat (limited to 'web_interface')
| -rw-r--r-- | web_interface/drinks/templates/drinks_overview.html | 39 |
1 files changed, 35 insertions, 4 deletions
diff --git a/web_interface/drinks/templates/drinks_overview.html b/web_interface/drinks/templates/drinks_overview.html index cc80881..7bee2d7 100644 --- a/web_interface/drinks/templates/drinks_overview.html +++ b/web_interface/drinks/templates/drinks_overview.html @@ -2,11 +2,42 @@ {% block content %} - <div class="grid"> +<div class="field label prefix border"> + <i>search</i> + <input type="text" id="search-bar"> + <label>Search</label> + <i class="front" style="visibility: hidden" id="search-clear" onclick="document.getElementById('search-bar').value = ''; Search('')">close</i> +</div> + +<script> + const searchBar = document.getElementById('search-bar'); + + function Search(value) { + const drinks = document.getElementById('drinks').children; + document.getElementById('search-clear').style.visibility = searchBar.value.length > 0 ? '' : 'hidden'; + // Loop through all list items and hide those that don't match the filter + for (let i = 0; i < drinks.length; i++) { + const itemText = drinks[i].textContent.toLowerCase(); + // Show item if it matches the filter, hide otherwise + if (itemText.includes(value.toLowerCase())) { + drinks[i].style.display = ''; + } else { + drinks[i].style.display = 'none'; + } + } + } + + searchBar.addEventListener('input', function() { + Search(this.value) +}); +</script> + + +<div class="grid" id="drinks"> {% for drink in drinks %} - <div id="drinks" class="s12 l6"> + <div id="drink" class="s12 l6"> <article class="no-padding"> <div class="grid no-space"> @@ -41,6 +72,6 @@ {% endfor %} - </div> +</div> -{% endblock %} +{% endblock %} |