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

added href to search results, changed to use global hidden atribute, added click outside of search to hide results

Browse Source
This commit is contained in:
David Katrinka 2025-07-03 22:40:09 +02:00
parent 44863aecbd
commit caa48d3b62
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/js/main.js
View File

@ -76,9 +76,10 @@ searchInput.addEventListener('input', function () {
searchTimeout = setTimeout(async () => { searchTimeout = setTimeout(async () => {
let searchValue = this.value.trim(); let searchValue = this.value.trim();
if (searchValue.length < 3) { if (searchValue.length < 3) {
searchResults.innerHTML = ''; searchResults.innerHTML = '';
searchResults.classList.add('hidden'); searchResults.hidden = true;
return; return;
} }
@ -107,16 +108,22 @@ searchInput.addEventListener('input', function () {
results.forEach(result => { results.forEach(result => {
searchResults.innerHTML += ` searchResults.innerHTML += `
<div class="search-result-item hover-anim"> <div class="search-result-item hover-anim">
<a href="#" class="search-result-link"> <a href="${result.url}" class="search-result-link">
${result.field_title} ${result.field_title}
</a> </a>
</div> </div>
`; `;
}); });
searchResults.classList.remove('hidden'); searchResults.hidden = false;
} else { } else {
searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`; searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
searchResults.classList.remove('hidden'); searchResults.hidden = false;
} }
}, 300); }, 300);
}); });
document.addEventListener('click', function (event) {
if (!searchResults.contains(event.target) && event.target !== searchInput) {
searchResults.hidden = true;
}
});

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

@ -67,7 +67,7 @@
<div class="search-and-login"> <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" id="search-input" class="search-input" placeholder="Search recipes..."> <input type="text" id="search-input" class="search-input" placeholder="Search recipes...">
<div class="search-results hidden" id="search-results"> <div class="search-results" id="search-results" hidden>
</div> </div>
<a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>" <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>"