Merge pull request 'TIST-40: added search functionality using fetch' (#28) from TIST-40 into develop

Reviewed-on: #28
Reviewed-by: steve_dekart <stevedekart2020@gmail.com>

assets/css/style.css

@@ -102,14 +102,11 @@ body {
     background: #00660f;
 }
 
-/*placeholder for search and login section*/
+
 .search-and-login {
     display: flex;
     align-items: center;
     position: relative;
-    /* width: 277px;
-    height: 49px;
-    border: #000 solid 1px; */
 }
 
 .search-input {
@@ -126,6 +123,33 @@ body {
 
 }
 
+
+.search-results {
+    position: absolute;
+    top: 110%;
+    left: 0;
+    background-color: var(--panel-background);
+    border: 1px solid #A8C9AA;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    width: 220px;
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.search-result-item {
+    padding: 10px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    color: var(--common-text);
+    font-family: var(--common-font);
+}
+
+.search-result-item a{
+    text-decoration: none;
+    color: var(--title-color);
+}
+
 .login-link {
     background-color: #C7E2C9;
     height: 36px;

assets/js/main.js

@@ -64,3 +64,66 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     });
 });
+
+const searchInput = document.getElementById('search-input');
+const searchResults = document.getElementById('search-results');
+
+let searchTimeout;
+
+searchInput.addEventListener('input', function () {
+    clearTimeout(searchTimeout);
+
+    searchTimeout = setTimeout(async () => {
+        let searchValue = this.value.trim();
+
+
+        if (searchValue.length < 3) {
+            searchResults.innerHTML = '';
+            searchResults.hidden = true;
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('action', 'search');
+        formData.append('query', searchValue);
+
+        const response = await fetch('/ajax', {
+            method: 'POST',
+            body: formData
+        });
+
+        const json = await response.json();
+
+        if (!response.ok) {
+            const message = json.error || 'Something went wrong.';
+            showToastify(message, 'error');
+            return;
+        }
+
+        const results = json.result;
+
+        searchResults.innerHTML = '';
+
+        if (results.length > 0) {
+            results.forEach(result => {
+                searchResults.innerHTML += `
+        <div class="search-result-item hover-anim">
+            <a href="${result.url}" class="search-result-link">
+            ${result.field_title}
+            </a>
+        </div>
+        `;
+            });
+            searchResults.hidden = false;
+        } else {
+            searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
+            searchResults.hidden = false;
+        }
+    }, 300);
+});
+
+document.addEventListener('click', function (event) {
+    if (!searchResults.contains(event.target) && event.target !== searchInput) {
+        searchResults.hidden = true;
+    }
+});

components/templates/layout/header.php

@@ -54,21 +54,28 @@
                     <ul class="nav-list">
                         <li class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
                         </li>
-                        <li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>" class="nav-link">RECIPES</a></li>
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>"
-                        <li class="nav-item"><a href="<?php the_permalink("recipes:favorites")?>" class="nav-link">FAVORITES</a></li>
+                                class="nav-link">RECIPES</a></li>
-                        <li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>" class="nav-link">MEAL A DAY</a></li>
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:favorites") ?>"
+                                class="nav-link">FAVORITES</a></li>
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>"
+                                class="nav-link">MEAL A DAY</a></li>
                         <li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
                     </ul>
                 </nav>
 
                 <div class="search-and-login">
-                     <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                    <i class="fa-solid fa-magnifying-glass search-icon"></i>
-                    <input type="text" class="search-input" placeholder="Search recipes...">
+                    <input type="text" id="search-input" class="search-input" placeholder="Search recipes...">
-                    <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>" class="login-link hover-anim">
+                    <div class="search-results" id="search-results" hidden>
+                        
+                    </div>
+                    <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>"
+                        class="login-link hover-anim">
                         <i class="fa-regular fa-user"></i>
                     </a>
                 </div>
-                 <button id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation">
+                <button id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation">
                     <i id="menu-icon" class="fa-solid fa-bars"></i>
                 </button>
             </div>