Simple JavaScript Searchbar

JavaScript, Webontwikkeling

Gepubliceerd: 27.10.2023

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:
Searchbar HTML example

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

  • -element te wijzigen, gebruiken we een voorwaardelijke (ternary) operator. In het kort: Operand één is een voorwaarde, het deel na het "?" wordt gebruikt als de voorwaarde "waar" is, het deel na ":" wordt gebruikt als de voorwaarde "onwaar" is.

    Deze code zal nu het element tonen wanneer de tekst ervan je gezochte string bevat en het verbergen wanneer dat niet het geval is.

    Er zijn veel verschillende manieren om deze code te schrijven en dezelfde resultaten te bereiken. Dit artikel toont een zeer eenvoudige en compacte JavaScript-zoekbalk. Complete code:

    <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>
    
  • Lees hier onze blogs!

    Breid je kennis uit met de 4BIS Blog...

    Wat kosten API koppelingen?

    Webontwikkeling, Software modernisering, Bedrijfssoftware, Managed Hosting, Saas

    API-koppelingen zijn essentieel voor een naadloze integratie tussen softwaresystemen, maar het bepalen van de kosten voor het creëren van een API kan complex zijn. In deze gids leggen we de belangrijkste factoren uit die de kosten van API-ontwikkeling...

    Lees meer

    5 tips om de juiste software ontwikkelaar te vinden

    Webontwikkeling, Software modernisering, Ecommerce / Webshop, Bedrijfssoftware, PHP, MySQL, HTML & CSS

    Ontdek 5 essentiële tips om de juiste software ontwikkelaar te vinden, van prijs-kwaliteitverhouding tot locatie en ervaring. Lees onze handige gids!

    Lees meer

    Automatisering van uw Software en Processen: Voordelen en Toepassingen

    Automatisering, Webontwikkeling, Software modernisering, Bedrijfssoftware, kennisbank

    Ontdek hoe automatisering van uw software en processen uw bedrijf kan verbeteren. Leer over de voordelen van automatisering en hoe het uw bedrijfsvoering efficiënter kan maken. Neem contact met ons op voor op maat gemaakte automatiseringsoplossingen.

    Lees meer

    En wat kunnen we voor jou betekenen?_

    Wil je meer weten of heb je interesse? Neem dan gerust direct contact met ons op, per telefoon of via de mail.
    Of maak gebruik van één van onze contactformulieren zodat we je zo snel en gepast mogelijk antwoord kunnen geven. We horen graag van je!

    back to top