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...

    WordPress en Plugins – Een wereld die voor je open gaat!

    WordPress, Webontwikkeling, Ecommerce / Webshop, kennisbank, WooCommerce

    Met plugins kan je functionaliteit van wordpress uitbreiden of geheel nieuwe functies aan wordpress toevoegen. Plugins kan je zelf maken, mits je verstand hebt van php, of je kan ze downloaden.

    Lees meer

    Onthulling van Tech-Nieuws.nl: Waar Innovatie Samenkomt met Vindingrijkheid

    SEO / SEA, Software-modernisering, Webontwikkeling, PHP, Symfony, Digitale Marketing

    In het bruisende rijk van technologie is up-to-date blijven niet alleen een noodzaak maar een levensstijl geworden. Met een overvloed aan informatie die ons dagelijks overspoelt, wordt een betrouwbare bron om het laatste technieuws te selecteren en te...

    Lees meer

    HR software: Zo automatiseer je Human Resource Management

    Bedrijfssoftware, Software-modernisering, Webontwikkeling, Automatisering

    HRM, ook wel Human Resource Management, is een belangrijk onderdeel voor ieder bedrijf. Vooral als je veel werknemers hebt, is een HR afdeling niet te missen. Het is echter niet nodig om een enorme HR afdeling te hebben. Veel is te automatiseren door...

    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