Simple JavaScript Searchbar

Zoekbalken zijn een veelvoorkomend verschijnsel op websites. Je ziet ze overal in allerlei vormen en maten. Sommige zijn gewoon eenvoudige tekstzoekbalken en sommige zijn grote complexe zoekbalken die een database bevragen of API-calls doen.

In dit artikel zal ik je laten zien hoe je een eenvoudige tekstzoekbalk kunt maken die zoekt in een lijst van HTML-elementen.

Allereerst, maak je HTML.

  
<input type="text" placeholder="Zoek fruitsoorten..." id="searchBar">
<ul id="fruits-list">
    <li>Appel</li>
    <li>Peer</li>
    <li>Banaan</li>
    <li>Sinaasappel</li>
</ul>

Deze code zal een zeer eenvoudige lijst op het scherm weergeven die er ongeveer zo uitziet:

Vervolgens kunnen we een scripttag onder deze code schrijven en beginnen met het schrijven van onze JavaScript. We beginnen met het toevoegen van een "keyup" gebeurtenisluisteraar aan de tekstzoekbalk. JavaScript staat je toe om dezelfde code op verschillende manieren te schrijven. In dit voorbeeld zal ik een "arrow function" gebruiken en haal ik de zoekwaarde uit de "evt" parameter.

  
<script>
    document.getElementById("searchbar").addEventlistener("keyup", evt => {
    	const searchValue = evt.target.value.toLowerCase()
    })
</script>

Elke keer dat je iets in het tekstveld typt, wordt de waarde van wat je hebt getypt omgezet naar kleine letters en opgeslagen in de searchValue variabele. De reden waarom we .toLowerCase() gebruiken, is om de zoekbalk niet-hoofdlettergevoelig te maken.

Vervolgens selecteren we alle <li> -elementen binnen ons <ul>-element en lopen we erdoorheen om hun inhoud te controleren.

  
<script>
    document.getElementById("searchbar").addEventlistener("keyup", evt => {
    	const searchValue = evt.target.value.toLowerCase()
        for (const li of document.querySelector("#fruits-list")) {
            const content = li.innerText.toLowerCase()
            li.style.display = content.includes(searchValue) ? "list-item" : "none"
        }
    })
</script>

De inhoud van het lijstitem is de innerText, omgezet naar kleine letters om hoofdlettergevoeligheid te negeren. Om de zichtbaarheid van het

<input type="text" placeholder="Search fruits..." id="searchBar">
<ul id="fruits-list">
    <li>Appel</li>
    <li>Peer</li>
    <li>Banaan</li>
    <li>Sinaasappel</li>
</ul>  

<script>
    document.getElementById("searchbar").addEventlistener("keyup", evt => {
    	const searchValue = evt.target.value.toLowerCase()
        for (const li of document.querySelector("#fruits-list")) {
            const content = li.innerText.toLowerCase()
            li.style.display = content.includes(searchValue) ? "list-item" : "none"
        }
    })
</script>