Maak je eigen DIY JavaScript zoekbalk

Vandaag ga ik je laten zien hoe je een eenvoudige zoekbalk kan maken voor een grote tabel of lijst. Soms worden lijsten of tabellen zo groot dat het een opgave wordt om de data eruit te halen die je nodig hebt. In zo'n geval kan een zoekbalk uitkomst bieden. De zoekbalk die we vandaag gaan maken is een simpele vanilla JavaScript zoekbalk. Om een zoekbalk nuttig te laten zijn moet je natuurlijk wat hebben om in te zoeken dus ik heb een lijst met personages van mijn favoriete TV-serie Game of Thrones met de acteurs en actrices door wie ze gespeeld worden erachter.

Stap-voor-stap: Een eenvoudige zoekbalk maken met vanilla JavaScript

Vandaag gaan we het anders doen in plaats van een verhaal over een software gerelateerd onderwerp doen we een korte tutorial over ontwikkeling. Ik ga je laten zien hoe je een eenvoudige zoekbalk kan maken voor een grote tabel of list op de webpagina. Soms worden HTML lijsten of tabellen zo groot dat het een opgave wordt om de data eruit te halen die je nodig hebt. In zo’n geval kan een dynamische zoekbalk uitkomst bieden. De zoekbalk voor een webpagina die we vandaag gaan ontwikkelen is een simpele vanilla JavaScript zoekbalk.

De basis zoekbalk maken

Het eerste waar we mee moeten beginnen is de zoekbalk zelf dit is gewoon een simpel html input field

<input type="text" id="searchbar_got" name="search" placeholder="Zoek je favoriere acteur of personage van Game of Thrones">
  

Zoekbalk Stylen

We voegen was css toe zodat de zoekbalk er wat mooier uitziet

#searchbar_got {
   padding: 10px;
   border-radius: 5px;
   font-size: 15px;
   background: #f8fafe;
}

Input gebeurtenis opvangen

Hier gebeurt de magie nu gaan we ons JavaScript schrijven. We beginnen met het ophalen van de input van de zoekbalk. Daarna willen we dat als we wat invoeren dat hij de zoekfunctie begint uit te voeren dit kunnen we doen met het event keyup.

const searchInput = document.getElementById("searchbar_got");
searchInput.onkeyup = searchGOT;
 

Gegevens ophalen

We hebben nu het stukje JavaScript geschreven dat de functie searchGOT wordt aangeroepen. Dan is het nu tijd om de functie te scrijven. Eerst moeten we de waarde van het input veld ophalen en in een variabele stoppen die zetten we vervolgens om in uppercase letters. En de tabel waar we doorheen willen zoeken zetten we ook in een variabele vervolgens halen we alle rijen van de tabel op en zetten die in een array.

function searchGOT() {
    const table = document.getElementById(‘gottable’);
    const allCharacters = table.getElementsByTagName(’tr’);
}
  

De For-Loop

Nu we alle data hebben opgehaald is het tijd om er doorheen te loopen. We gebruiken hiervoor een simpele for loop, we beginnen de for loop op positie 1 zodat we de headers overslaan. Daarna halen we van elke rij de cellen in die rij op en beginnen een nieuwe loop door de cellen in de row. Nu kunnen we door beiden kolommen zoeken. We gebruiken nu een if statement om te kijken of de waarde die we hebben ingevuld ergens voorkomt in de cellen van de row. Ook zetten we de cell waarde om naar UpperCase zodat hij precies hetzelfde is als onze input waarde van de zoekbalk. Voor het zoeken gebruiken we de indexOf() method als deze niks vind geeft hij de waarde -1 dus als onze input een waarde hoger dan -1 teruggeeft heeft hij hem gevonden. Als hij hem gevonden heeft zet hij de waarde true voor de variabele hit.

for (var i=1; i < allCharacters.length; i++) {
    var cellData = allCharacters[i].getElementsByTagName(’td’);
    for (var j=0; j < cellData.length; j++) {
       if(cellData[j].innerHTML.toUpperCase().indexOf(searchValue) > -1) {
       var hit = true;
    }
}

If/else statement

Als we gevonden hebben waar we naar op zoek zijn moeten we nu de resultaten die we niet nodig hebben weghalen. Dit gaan we doen met een simpel if/ else statement als de waarde hit op true staat doen we niks maar als hij op false staat willen we dat die rij niet te zien is. Dit doen we door er een css waarde met display: none aan toe te kennen. Wel zetten we in het else statement nog een if statement die de eerste rij die van de headers overslaat. En als hij op hit = true staat doen we niks en zetten we de waarde weer terug naar false.

if (hit) {
   allCharacters[i].style.display = "";
   hit = false;
} else {
   if (i > 0) {
      allCharacters[i].style.display = "none";
   }
}

Alles samenvoegen

Als we gevonden hebben waar we naar op zoek zijn moeten we nu de resultaten die we niet nodig hebben weghalen. Dit gaan we doen met een simpel if/ else statement als de waarde hit op true staat doen we niks maar als hij op false staat willen we dat die rij niet te zien is. Dit doen we door er een css waarde met display: none aan toe te kennen. Wel zetten we in het else statement nog een if statement die de eerste rij die van de headers overslaat. En als hij op hit = true staat doen we niks en zetten we de waarde weer terug naar false.

Volledige code

<input type="text" id="searchbar_got" name="search" placeholder="Zoek je favoriere acteur of personage van Game of Thrones">

<style>
#searchbar_got {
   padding: 10px;
   border-radius: 5px;
   font-size: 15px;
   background: #f8fafe;
}
</style>

<script>
   const searchInput = document.getElementById("searchbar_got");
   searchInput.onkeyup = searchGOT;

   function searchGOT() {
       const table = document.getElementById(‘gottable’);
       const allCharacters = table.getElementsByTagName(’tr’);
   }

   for (var i=1; i < allCharacters.length; i++) {
       var cellData = allCharacters[i].getElementsByTagName(’td’);
       for (var j=0; j < cellData.length; j++) {
          if(cellData[j].innerHTML.toUpperCase().indexOf(searchValue) > -1) {
          var hit = true;
       }
   }

   if (hit) {
      allCharacters[i].style.display = "";
      hit = false;
   } else {
      if (i > 0) {
        allCharacters[i].style.display = "none";
      }
   }
</script>

Wat we voor jou kunnen betekenen

Als softwarebedrijf zijn wij gespecialiseerd in software ontwikkeling op maat. Vaak komen onze klanten met complexe opdrachten en vragen ons om interactive widgets en andere interactieve web componenten te ontwikkelen. Ook op de vraag “kunnen we bij jullie een professionele webshop laten maken” antwoorden we graag ja. Blij worden we van het bouwen van online platformen. Ons team ontwikkeld op basis van open-source technologie zoals JavaScript, React, Node.js, dynamische SVG of PHP. We dragen bij aan deze opensource technologie, delen deze binnen ons team en leren zo iedere keer iets nieuws. Heb jij een uitdaging of een onoplosbare technische kwestie? Laat het ons weten, we zoeken samen naar de juiste oplossing!