Hledat v odkazech menu

by Petr Haluza

HTML

<section id="searchInMenu">

<div class="searchInMenuSearch">
  <label for="searchbox" class="is-size-5">Hledat v menu</label>
  <input class='input mb-5' type="search" 
  id="menuSearchbox" placeholder="např. 'dodací list'.." onfocusout="hideLinks()">
</div>

<ul class="searchInMenuItems">
<li>  <a href="#">Dodací listy</a>  <span class="klicova-slova">dodák doklad</span> </li>
<li>  <a href="#">Expedice</a>  <span class="klicova-slova"></span> </li>
<li>  <a href="#">Faktury</a>  <span class="klicova-slova">doklad</span> </li>
<li>  <a href="#">Kontaktovat podporu</a>  <span class="klicova-slova">kontaktni formular podpora</span> </li>
<li>  <a href="#">Obchodní podmínky</a>  <span class="klicova-slova">řád</span> </li>
<li>  <a href="#">Objednávky</a>  <span class="klicova-slova"></span> </li>
<li>  <a href="#">Odborné články podpory</a>  <span class="klicova-slova">podpora články technologie</span> </li>
<li>  <a href="#">Přehled reklamací</a>  <span class="klicova-slova">rma reklamace</span> </li>
<li>  <a href="#">Reklamační podmínky</a>  <span class="klicova-slova">reklamace řád</span> </li>
<li>  <a href="#">Vrácení zásilky</a>  <span class="klicova-slova">vratka vratky reklamace</span> </li>
<li>  <a href="#">Založení reklamace</a>  <span class="klicova-slova">rma reklamace</span> </li>

<li>  <a href="#">Nabídkový systém (nápověda)</a>  <span class="klicova-slova">nabídky</span> </li>
</ul>

</section>

(zkus: doklad, rma, reklamace)

CSS

section { padding:20px; background: lightblue}
#searchInMenu .is-hidden {height:0px; opacity:.0; }
#searchInMenu .is-visible {  display:block; opacity:1; }
.searchInMenuItems {display:none; max-height:200px; overflow-y:auto; width:max-content; background:white; position:absolute; box-shadow:0 0 5px #cde}
.searchInMenuItems li {height:1.2em; opacity:1; transition: height .3s, opacity .4s; background:white ; overflow:hidden}
.klicova-slova {display:none}

JavaScript

let cards = document.querySelectorAll('.searchInMenuItems li') // v čem hledat
    
function liveSearch() {
    let search_query = document.getElementById("menuSearchbox").value;
    for (var i = 0; i < cards.length; i++) {
        if(cards[i].textContent.toLowerCase() // projdeme položky jestli najdeme text z inputu
                .includes(search_query.toLowerCase())) { 
            cards[i].classList.remove("is-hidden");
        } else {
            cards[i].classList.add("is-hidden");
        }
    }
}

// prodleva pro psaní
let typingTimer;               
let typeInterval = 400;  
let searchInput = document.getElementById('menuSearchbox');

searchInput.addEventListener('keyup', () => { 
    clearTimeout(typingTimer);
    typingTimer = setTimeout(liveSearch, typeInterval); // spustit hledání po prodlevě
    showLinks(); // zobrazit element s výsledky
   
});


function showLinks() {
    $('.searchInMenuItems').removeClass("is-hidden");
    $('.searchInMenuItems').addClass("is-visible"); 
    
}
function hideLinks() {
    $('.searchInMenuItems').removeClass("is-visible");
    $('.searchInMenuItems').addClass("is-hidden");
}