Searchable Table In HTML Javascript (Simple Examples)

Need to add a search box to a table in your project? While some other masters speak in riddles, Master Coffee likes straightforward. So here’s how to do it in less than 15 lines of Javascript code. No kidding, let’s go!

 

CODE DOWNLOAD

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

SEARCHABLE TABLE DEMO

This demo will search the first column (vegetables) only. Also, take note that the search is case-insensitive.

Vegetable	Color
Artichoke	Green
Asparagus	Green
Broccoli	Green
Cabbage	Green and purple
Carrot	Orange
Chilli	Red
Corn	Yellow
Eggplant	Purple
Ginger	Brown
Okra	Green

 

 

THE HTML – “REGULAR TABLE & SEARCH BOX”

<!-- (PART A) SEARCH FOR -->
<input type="text" id="sFor" placeholder="Search For...">
 
<!-- (PART B) TABLE TO SEARCH -->
<table id="sTable">
  <tr>
    <th>Vegetable</th> <th>Color</th>
  </tr>
  <tr>
    <td>Artichoke</td> <td>Green</td>
  </tr>
  <tr>
    <td>Asparagus</td> <td>Green</td>
  </tr>
  <tr>
    <td>Broccoli</td> <td>Green</td>
  </tr>
  <tr>
    <td>Cabbage</td> <td>Green and purple</td>
  </tr>
  <tr>
    <td>Carrot</td> <td>Orange</td>
  </tr>
  <tr>
    <td>Chilli</td> <td>Red</td>
  </tr>
  <tr>
    <td>Corn</td> <td>Yellow</td>
  </tr>
  <tr>
    <td>Eggplant</td> <td>Purple</td>
  </tr>
  <tr>
    <td>Ginger</td> <td>Brown</td>
  </tr>
  <tr>
    <td>Okra</td> <td>Green</td>
  </tr>
</table>

There’s “nothing special” in the HTML. We only need a “regular search box” and a “regular table”.

 

 

THE JAVASCRIPT – CASE SENSITIVE SEARCH

window.addEventListener("load", () => {
  // (PART A) GET HTML ELEMENTS
  const sFor = document.getElementById("sFor"),
        sTable = document.querySelectorAll("#sTable td:nth-child(1)");
 
  // (PART B) SEARCH CELLS AS USER TYPES
  sFor.addEventListener("keyup", () => {
    for (let td of sTable) {
      td.parentElement.style.display = td.innerHTML.indexOf(sFor.value) == -1 ? "none" : "table-row";
    }
  });
});

Master Coffee is not joking when he says “less than 15 lines of code”.

1. On window load, get the search box and the table cells you want to search. Take note, td:nth-child(1) will only search the first column (vegetables) in this example.
2. Search through the cells as the user types in the search box. Hide the rows that do not match and show those that do.

P.S. Take note that indexOf(SEARCH VALUE) is case-sensitive.

 

 

THE JAVASCRIPT – CASE INSENSITIVE SEARCH

window.addEventListener("load", () => {
  // (PART A) GET HTML ELEMENTS
  const sFor = document.getElementById("sFor"),
        sTable = document.querySelectorAll("#sTable td:nth-child(1)");
 
  // (PART B) SEARCH CELLS AS USER TYPES
  sFor.addEventListener("keyup", () => {
    const search = sFor.value.toLowerCase();
    for (let td of sTable) {
      td.parentElement.style.display = td.innerHTML.toLowerCase().indexOf(sFor.value) == -1 ? "none" : "table-row";
    }
  });
});

If you prefer a case-insensitive search, just make 2 small changes.

• Convert the search term to all lowercase – const search = sFor.value.toLowerCase()
• Do the matching in all lower case too – td.innerHTML.toLowerCase().indexOf(SEARCH TERM)

P.S. If you want to search the second column (color), just change the query selector – #sTable td:nth-child(2)

 

 

THE JAVASCRIPT – SEARCH ENTIRE TABLE

window.addEventListener("load", () => {
  // (PART A) GET HTML ELEMENTS
  const sFor = document.getElementById("sFor"),
        sTable = document.querySelectorAll("#sTable tr:not(:first-of-type)");
 
  // (PART B) SEARCH CELLS AS USER TYPES
  sFor.addEventListener("keyup", () => {
    for (let tr of sTable) {
      for (let td of tr.querySelectorAll("td")) {
        var match = td.innerHTML.indexOf(sFor.value) != -1;
        if (match) { break; }
      }
      tr.style.display = match ? "table-row" : "none" ;
    }
  });
});

If you want to search the entire table, some small changes once again:

1. Take note, we are getting all the rows now (excluding the first row).
2. As the user types, we check all the cells of each row. As usual – Show the row only if there is a match.

 

 

THE END – NOT GOOD FOR MASSIVE TABLES

That’s all for this short tutorial, I hope it has helped you. But before we end, Master Coffee is aware that the search performance is “only good for limited data”. Here are some random thoughts and bits on dealing with massive tables:

• You have to acknowledge that every device has limited resources.
• It is better to keep massive amounts of data in a database, on the server side.
• Don’t try to display an entire database in a single table – Break the table into multiple pages instead.
• Same with the search, change to a server-side database search instead.
• Don’t bother with a Javascript search unless you intend to install a “mini database” into the user’s device – Something like SQL.js

 

 

CHEAT SHEET