search

src/templates/nutrition.html

@@ -151,7 +151,26 @@
                 .catch(error => console.error('Fehler:', error));
         }
 
-document.addEventListener('DOMContentLoaded', loadDatabaseEntries);
+    document.addEventListener('DOMContentLoaded', loadDatabaseEntries);
+
+    function filterTable() {
+        const searchInput = document.getElementById('search-input');
+        const filterText = searchInput.value.toUpperCase();
+        const table = document.getElementById('database-nutrition-table');
+        const rows = table.getElementsByTagName('tr');
+
+        for (let i = 1; i < rows.length; i++) { // Beginnen bei 1, um die Kopfzeile auszulassen
+            const cell = rows[i].getElementsByTagName('td')[0]; // Angenommen, der zu suchende Text befindet sich in der ersten Spalte
+            if (cell) {
+                const textValue = cell.textContent || cell.innerText;
+                if (textValue.toUpperCase().indexOf(filterText) > -1) {
+                    rows[i].style.display = ""; // Zeile anzeigen
+                } else {
+                    rows[i].style.display = "none"; // Zeile verstecken
+                }
+            }
+        }
+    }
 
 
     </script>
@@ -191,6 +210,11 @@ document.addEventListener('DOMContentLoaded', loadDatabaseEntries);
             <button type="submit" id="submit-button" disabled>Hinzufügen</button>
         </form>
 
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Lebensmittel suchen..." oninput="filterTable()">
+        </div>
+        
+
         <div id="table-container">
             <table id="database-nutrition-table">
                 <thead>