Search bar

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