Create your own DIY JavaScript search bar

Auteur: 4BIS Innovations | Support

Gepubliceerd: 03.07.2020

Today I'm going to show you how to create a simple search bar for a large table or list. Sometimes lists or tables become so large that it becomes a challenge to extract the data you need. In such a case, a search bar can offer a solution. The search bar we are going to create today is a simple vanilla JavaScript search bar. Of course, for a search bar to be useful you need something to search in so I have a list of characters from my favorite TV series Game of Thrones with the actors and actresses who play them behind it.


Today we are going to do it differently instead of a story on a software related topic we are doing a short tutorial on development. I'm going to show you how to create a simple search bar for a large table or list on the web page. Sometimes HTML lists or tables get so large that it becomes a challenge to extract the data you need. In such a case, a dynamic search bar can offer a solution. The search bar for a web page that we are going to develop today is a simple vanilla JavaScript search bar.


The first thing we need to start with is the search bar itself this is just a simple html input field


input type=”text” id=”searchbar_got” name=”search” placeholder=”Find your favorite actor or character from Game of Thrones”


We're adding wax css to make the search bar look a bit nicer


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


This is where the magic happens now we are going to write our JavaScript. We start by getting the input from the search bar. After that we want if we enter something that he will start the search function we can do this with the event keyup.


var searchInput = document.getElementById("searchbar_got");


searchInput.onkeyup = searchGOT;


We have now written the piece of JavaScript that calls the searchGOT function. Now it's time to write the function. First we need to get the value of the input field and put it in a variable we then convert it into uppercase letters. And the table we want to search through we also put in a variable, then we retrieve all rows of the table and put them in an array.


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


var table = document.getElementById(‘gottable’);
var allCharacters = table.getElementsByTagName(’tr’);


Now that we've retrieved all the data, it's time to run through it. We use a simple for loop for this, we start the for loop at position 1 so that we skip the headers. Then we retrieve the cells in that row from each row and start a new loop through the cells in the row. Now we can search through both columns. We now use an if statement to see if the value we entered occurs somewhere in the cells of the row. We also convert the cell value to UpperCase so that it is exactly the same as our input value from the search bar. For the search we use the indexOf() method if it finds nothing it returns the value -1 so if our input returns a value higher than -1 it has found it. When he has found it, he sets the value true for the variable 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;
}
}


Once we've found what we're looking for, we now have to get rid of the results we don't need. We will do this with a simple if/else statement if the value hit is true we do nothing but if it is false we don't want that row to be visible. We do this by assigning it a css value with display: none. We do, however, include an if statement in the else statement that skips the first row of the headers. And if it is hit = true, we do nothing and set the value back to false.


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


Once we've found what we're looking for, we now have to get rid of the results we don't need. We will do this with a simple if/else statement if the value hit is true we do nothing but if it is false we don't want that row to be visible. We do this by assigning it a css value with display: none. We do, however, include an if statement in the else statement that skips the first row of the headers. And if it is hit = true, we do nothing and set the value back to false.


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


As a software company, we are specialized in custom software development. Our customers often come up with complex assignments and ask us to develop interactive widgets and other interactive web components. We are also happy to answer yes to the question “can we have a professional webshop made for you”. Building online platforms makes us happy. Our team developed on the basis of open-source technology such as JavaScript, React, Node.js, dynamic SVG or PHP. We contribute to this open source technology, share it within our team and learn something new every time. Do you have a challenge or an unsolvable technical issue? Let us know, we will look for the right solution together!


Contact us

Niet kunnen vinden wat je zocht?_

Heb je het antwoord op een vraag niet kunnen vinden? Of heb je het idee dat er nog iets ontbreekt op onze kennisbank? Laat het ons weten. Stel je vraag direct per telefoon aan onze Supportdesk of zet je verzoek op de mail en je ontvangt binnen 24 uur een reactie.