web_programming/fridge_bites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TIST-40: added search functionality using fetch

Browse Source
This commit is contained in:
David Katrinka 2025-07-03 15:36:57 +02:00
parent 80a23a5080
commit a6a759b8f9
3 changed files with 99 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/style.css
View File

@ -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;

56
assets/js/main.js
View File

@ -64,3 +64,59 @@ 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.classList.add('hidden');
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="#" class="search-result-link">
${result.field_title}
</a>
</div>
`;
});
searchResults.classList.remove('hidden');
} else {
searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
searchResults.classList.remove('hidden');
}
}, 300);
});

21
components/templates/layout/header.php
View File

@ -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: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="<?php the_permalink("recipes:catalog") ?>"
class="nav-link">RECIPES</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>
<input type="text" class="search-input" placeholder="Search recipes...">
<a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>" class="login-link hover-anim">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" id="search-input" class="search-input" placeholder="Search recipes...">
<div class="search-results hidden" id="search-results">
</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>