Update templates/menu.html

templates/menu.html

@@ -228,6 +228,29 @@
             font-size: 18px;
             color: #888;
         }
+        .autocomplete-suggestions {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            max-height: 200px;
+            overflow-y: auto;
+            background-color: #fff;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            display: none;
+        }
+        .autocomplete-suggestions .suggestion-item {
+            padding: 8px 15px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #333;
+        }
+        .autocomplete-suggestions .suggestion-item:hover {
+            background-color: #f1f1f1;
+        }
         .addon-section {
             background-color: #fff;
             border: 2px solid #6c757d;
@@ -631,8 +654,9 @@
             </div>
         </div>
         <div class="search-bar-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections...">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
+            <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
         </div>
     </div>
 
@@ -791,6 +815,28 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 
     <script>
+        // Menu items list for autocomplete
+        const menuItems = [
+            "Veg Manchurian",
+            "Veg Biryani",
+            "Sukka Gosht (Goat)",
+            "Samosa",
+            "Roti",
+            "Prawn Fry",
+            "Paneer Butter Masala",
+            "Paneer Biryani",
+            "Onion Pakoda",
+            "Mutton Biryani",
+            "Fish Curry",
+            "Fiery Mango Glaze Chicken",
+            "Chilli Gobi",
+            "Chilli Chicken",
+            "Chicken Manchurian",
+            "Chicken Curry",
+            "Chicken Biryani",
+            "Channa Masala"
+        ];
+
         const menuItemDetails = {
             "Veg Manchurian": {
                 ingredients: "Cauliflower, Onion, Ginger, Garlic, Soy Sauce, Cornflour, Green Chilies, Capsicum, Spring Onion",
@@ -923,7 +969,6 @@
         }
 
         document.addEventListener('DOMContentLoaded', function () {
-            // Avatar Dropdown Click Toggle
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
 
@@ -945,9 +990,7 @@
                 });
             });
 
-            // Existing Menu Functionality
             const menuCards = document.querySelectorAll('.menu-card');
-
             menuCards.forEach(card => {
                 const itemName = card.querySelector('.card-title').innerText;
                 const detailsDiv = card.querySelector('.item-details');
@@ -973,7 +1016,6 @@
             });
 
             const menuImages = document.querySelectorAll('.menu-image');
-
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
@@ -1032,6 +1074,44 @@
                     categoryForm.submit();
                 });
             });
+
+            // Autocomplete functionality
+            const searchBar = document.getElementById('searchBar');
+            const suggestionsContainer = document.getElementById('autocompleteSuggestions');
+
+            searchBar.addEventListener('input', function () {
+                const input = this.value.trim().toLowerCase();
+                suggestionsContainer.innerHTML = '';
+                suggestionsContainer.style.display = 'none';
+
+                if (input) {
+                    const filteredItems = menuItems.filter(item => 
+                        item.toLowerCase().startsWith(input)
+                    );
+                    if (filteredItems.length > 0) {
+                        filteredItems.forEach(item => {
+                            const suggestionDiv = document.createElement('div');
+                            suggestionDiv.classList.add('suggestion-item');
+                            suggestionDiv.innerText = item;
+                            suggestionDiv.addEventListener('click', function () {
+                                searchBar.value = item;
+                                suggestionsContainer.style.display = 'none';
+                                filterMenu();
+                            });
+                            suggestionsContainer.appendChild(suggestionDiv);
+                        });
+                        suggestionsContainer.style.display = 'block';
+                    }
+                }
+            });
+
+            document.addEventListener('click', function (event) {
+                if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
+                    suggestionsContainer.style.display = 'none';
+                }
+            });
+
+            searchBar.addEventListener('keyup', debounce(filterMenu, 300));
         });
 
         function debounce(func, wait) {
@@ -1053,8 +1133,6 @@
                 modalImg.src = image || '/static/placeholder.jpg';
             }
             document.getElementById('modal-description').innerText = description || 'No description available.';
-
-            // Populate nutritional info
             const nutritionalInfoEl = document.getElementById('modal-nutritional-info');
             const itemDetails = menuItemDetails[name];
             if (itemDetails && itemDetails.nutritionalInfo) {
@@ -1066,11 +1144,9 @@
 
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
-
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
-
             document.getElementById('quantityInput').value = 1;
 
             const prepStyleOptions = document.getElementById('prep-style-options');
@@ -1096,7 +1172,6 @@
 
             const addonsList = document.getElementById('addons-list');
             addonsList.innerHTML = '';
-
             const dummySections = [
                 { name: "Beverages", options: ["Sprite ($3)", "Thums Up ($3)", "Virgin Mojito ($3)", "Lemonade ($3)", "Blue Lagoon Mocktail ($3)"] },
                 { name: "Sauces", options: ["Mint Chutney", "Tomato Sauce"] },
@@ -1326,17 +1401,13 @@
             });
         }
 
-        document.getElementById('searchBar').addEventListener('keyup', debounce(filterMenu, 300));
-
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
             let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-
             if (isNaN(itemPrice)) {
                 alert('Invalid price for the item. Please check the item details.');
                 return;
             }
-
             const itemImage = document.getElementById('modal-img').src;
             const modalSectionEl = document.getElementById('modal-section');
             const section = modalSectionEl.getAttribute('data-section');
@@ -1347,7 +1418,6 @@
             }
            
             let selectedAddOns = [];
-
             const addonsListOptions = document.querySelectorAll('#addons-list .addon-option');
             addonsListOptions.forEach(option => {
                 if (option.checked) {