Update templates/search.html

templates/search.html

@@ -71,6 +71,12 @@
             color: #333;
             margin: 0;
         }
+        .no-results {
+            text-align: center;
+            color: #666;
+            font-size: 1.1rem;
+            margin-top: 20px;
+        }
         @media (max-width: 576px) {
             body {
                 padding: 15px;
@@ -103,17 +109,7 @@
             <i class="bi bi-search search-icon"></i>
         </div>
         <div id="searchResults">
-            {% for item in menu_items %}
-                <div class="item-card" 
-                     data-item-name="{{ item.Name | default('Unnamed Item') | e }}"
-                     data-item-section="{{ item.Section__c | default('Unknown') | e }}"
-                     onclick="redirectToMenu('{{ item.Name | default('Unnamed Item') | e }}')">
-                    <img src="{{ item.Image2__c | default('/static/placeholder.jpg') }}" 
-                         alt="{{ item.Name | default('Unnamed Item') }}" 
-                         class="item-image">
-                    <div class="item-name">{{ item.Name | default('Unnamed Item') }}</div>
-                </div>
-            {% endfor %}
+            <!-- Results will be populated dynamically -->
         </div>
     </div>
 
@@ -123,25 +119,81 @@
             window.location.href = `/menu?highlight=${encodedItemName}`;
         }
 
+        function sanitizeInput(input) {
+            const div = document.createElement('div');
+            div.textContent = input;
+            return div.innerHTML;
+        }
+
+        function debounce(func, wait) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+            };
+        }
+
         document.addEventListener('DOMContentLoaded', function () {
             const searchBar = document.getElementById('searchBar');
             const searchResults = document.getElementById('searchResults');
-            const allItems = Array.from(searchResults.querySelectorAll('.item-card'));
 
+            // Focus the search bar on page load
+            searchBar.focus();
+
+            // Debounced search function
+            const debouncedSearch = debounce(function (query) {
+                if (!query) {
+                    searchResults.innerHTML = '<p class="no-results">Please type to search for items.</p>';
+                    return;
+                }
+
+                // Fetch items from the server
+                fetch(`/api/search-items?query=${encodeURIComponent(query)}`)
+                    .then(response => {
+                        if (!response.ok) throw new Error('Network response was not ok');
+                        return response.json();
+                    })
+                    .then(data => {
+                        searchResults.innerHTML = '';
+                        if (data.items && data.items.length > 0) {
+                            data.items.forEach(item => {
+                                const itemCard = document.createElement('div');
+                                itemCard.className = 'item-card';
+                                itemCard.setAttribute('data-item-name', sanitizeInput(item.Name));
+                                itemCard.setAttribute('data-item-section', sanitizeInput(item.Section__c || 'Unknown'));
+                                itemCard.onclick = () => redirectToMenu(item.Name);
+
+                                const itemImage = document.createElement('img');
+                                itemImage.src = item.Image2__c || '/static/placeholder.jpg';
+                                itemImage.alt = item.Name || 'Unnamed Item';
+                                itemImage.className = 'item-image';
+
+                                const itemNameDiv = document.createElement('div');
+                                itemNameDiv.className = 'item-name';
+                                itemNameDiv.textContent = item.Name || 'Unnamed Item';
+
+                                itemCard.appendChild(itemImage);
+                                itemCard.appendChild(itemNameDiv);
+                                searchResults.appendChild(itemCard);
+                            });
+                        } else {
+                            searchResults.innerHTML = '<p class="no-results">No items found.</p>';
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error fetching search results:', error);
+                        searchResults.innerHTML = '<p class="no-results">Error loading items. Please try again.</p>';
+                    });
+            }, 300);
+
+            // Trigger search on input
             searchBar.addEventListener('input', function () {
-                const query = this.value.trim().toLowerCase();
-                allItems.forEach(item => {
-                    const itemName = item.getAttribute('data-item-name').toLowerCase();
-                    if (itemName.includes(query)) {
-                        item.style.display = 'flex';
-                    } else {
-                        item.style.display = 'none';
-                    }
-                });
+                const query = this.value.trim();
+                debouncedSearch(query);
             });
 
-            // Focus the search bar on page load
-            searchBar.focus();
+            // Initial state when no items are present
+            searchResults.innerHTML = '<p class="no-results">Please type to search for items.</p>';
         });
     </script>
 </body>