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.
updated: Jul 7, 2020 at 4:40PM | published: Jul 3, 2020

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.

Om een zoekbalk nuttig te laten zijn moet je natuurlijk wat hebben om in te zoeken dus hieronder is een tabel met personages van mijn favoriete TV-serie Game of Thrones met de acteurs en actrices door wie ze gespeeld worden erachter.

Wist je dat
De stappen zijn gemaakt met de fourbis Chart Navigator plugin een eigen WordPress plugin om handig door een stappenplan of charts heen te navigeren.

Acteur Personage
Sean Bean Eddard "Ned" Stark
Mark Addy Robert Baratheon
Nikolaj Coster-Waldau Jaime Lannister
Michelle Fairley Catelyn Stark
Lena Headey Cersei Lannister
Emilia Clarke Daenerys Targaryen
Iain Glen Jorah Mormont
Harry Lloyd Viserys Targaryen
Kit Harington Jon Snow
Richard Madden Robb Stark
Sophie Turner Sansa Stark
Maisie Williams Arya Stark
Alfie Allen Theon Greyjoy
Isaac Hempstead Wright Bran Stark
Jack Gleeson Joffrey Baratheon
Rory McCann Sandor "The Hound" Clegane
Peter Dinklage Tyrion Lannister
Aidan Gillen Petyr "Littlefinger" Baelish
Liam Cunningham Davos Seaworth
John Bradley Samwell Tarly
Stephen Dillane Stannis Baratheon
Carice van Houten Melisandre
James Cosmo Jeor Mormont
Jerome Flynn Bronn
Conleth Hill Varys
Sibel Kekilli Shae
Natalie Dormer Margaery Tyrell
Charles Dance Tywin Lannister
Oona Chaplin Talisa Maegyr
Rose Leslie Ygritte
Joe Dempsie Gendry
Kristofer Hivju Tormund Giantsbane
Gwendoline Christie Brienne of Tarth
Iwan Rheon Ramsay Bolton
Hannah Murray Gilly
Michiel Huisman Daario Naharis
Nathalie Emmanuel Missandei
Dean-Charles Chapman Tommen Baratheon
Indira Varma Ellaria Sand
Tom Wlaschiha Jaqen H'ghar
Michael McElhatton Roose Bolton
Jonathan Pryce The High Sparrow
Jacob Anderson Grey Worm

2

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

HTML

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

2

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

CSS

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

2

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.

JS

var searchInput = document.getElementById(“searchbar_got”);

searchInput.onkeyup = searchGOT;

2

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.

JS

function searchGOT() {
       var searchValue =        document.getElementById(‘searchbar_got’).value.toUpperCase();
       
       var table = document.getElementById(‘gottable’);
       var allCharacters = table.getElementsByTagName(’tr’);

2

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.

JS

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;
              }
       }

2

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.

JS

JS

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

2

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.

JS

JS

var searchInput = document.getElementById(“searchbar_got”);

searchInput.onkeyup = searchGOT;

function searchGOT() {

        var searchValue =         document.getElementById(‘searchbar_got’).value.toUpperCase();

        var table = document.getElementById(‘gottable’);
        var 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”;
                        }
                }
        }
}

2

Hieronder kunnen we het ontwikkelde script in werking zien.
Acteur Personage
Sean Bean Eddard "Ned" Stark
Mark Addy Robert Baratheon
Nikolaj Coster-Waldau Jaime Lannister
Michelle Fairley Catelyn Stark
Lena Headey Cersei Lannister
Emilia Clarke Daenerys Targaryen
Iain Glen Jorah Mormont
Harry Lloyd Viserys Targaryen
Kit Harington Jon Snow
Richard Madden Robb Stark
Sophie Turner Sansa Stark
Maisie Williams Arya Stark
Alfie Allen Theon Greyjoy
Isaac Hempstead Wright Bran Stark
Jack Gleeson Joffrey Baratheon
Rory McCann Sandor "The Hound" Clegane
Peter Dinklage Tyrion Lannister
Aidan Gillen Petyr "Littlefinger" Baelish
Liam Cunningham Davos Seaworth
John Bradley Samwell Tarly
Stephen Dillane Stannis Baratheon
Carice van Houten Melisandre
James Cosmo Jeor Mormont
Jerome Flynn Bronn
Conleth Hill Varys
Sibel Kekilli Shae
Natalie Dormer Margaery Tyrell
Charles Dance Tywin Lannister
Oona Chaplin Talisa Maegyr
Rose Leslie Ygritte
Joe Dempsie Gendry
Kristofer Hivju Tormund Giantsbane
Gwendoline Christie Brienne of Tarth
Iwan Rheon Ramsay Bolton
Hannah Murray Gilly
Michiel Huisman Daario Naharis
Nathalie Emmanuel Missandei
Dean-Charles Chapman Tommen Baratheon
Indira Varma Ellaria Sand
Tom Wlaschiha Jaqen H'ghar
Michael McElhatton Roose Bolton
Jonathan Pryce The High Sparrow
Jacob Anderson Grey Worm

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! Neem contact met ons


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!