Create your own DIY JavaScript search bar

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="Zoek je favoriere acteur of personage van Game of Thrones">
  

We're adding some 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.

const 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() {
    const table = document.getElementById(‘gottable’);
    const 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.

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

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!