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
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>
Ook interessant
Breid je kennis uit met de 4BIS Blog...
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 meerWebontwikkeling, 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 meerAutomatisering, 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 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!