19+ JavaScript Search Box for Table Example & Tutorial

This JavaScript code snippet helps you to create a search box for HTML table to filter table data. You can use this code to filter/search table data for multiple tables on a single page. It can be easily attached to your existing table by creating input (for search) with a data-table attribute.

It doesn’t matter how many rows and columns you have in your HTML table. This lightweight Vanilla JavaScript plugin searches through all rows/columns and displays the matched result.

How to Create JavaScript Search Box for Table

1. First of all, create an input element with a class name “table-filter” for the search box and create your table element with a class name “table”.

<section class="container cd-table-container">
  <h2 class="cd-title">Search Table Record:</h2>
  <input type="text" class="cd-search table-filter" data-table="order-table" placeholder="Item to filter.." />

  <table class="cd-table table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>ID</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Your data goes here...</td>
        <td>Email goes here...</td>
        <td>Phone number goes here...</td>
        <td>ID goes here...</td>
      </tr>
        .
        .
        .
        .
        .
      <tr>
        <td>Your data goes here...</td>
        <td>Email goes here...</td>
        <td>Phone number goes here...</td>
        <td>ID goes here...</td>
      </tr>
    </tbody>
  </table>
</section>

2. If you want to create a search box for your existing HTML table, then you only need to create an input element. So, create the input and set the class name of your table to the "data-table" attribute.

  <input type="text" class="cd-search table-filter" data-table="your-table" placeholder="Item to filter.." />

3. Basically, the CSS styles are optional for the table. Anyhow, you can use the following CSS styles if you want to style the table.

.cd-table-container{
  background: #fff;
  box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.2);
  padding: 15px;
  max-width: 720px;
}
/* Table Design */
.cd-table{
  width: 100%;
  color: #666;
  margin: 10px auto;
  border-collapse: collapse;
}

.cd-table tr,
.cd-table td{
  border: 1px solid #ccc;
  padding: 10px;
}
.cd-table th{
  background: #017721;
  color: #fff;
  padding: 10px;
}

/* Search Box */
.cd-search{
  padding: 10px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

/* Search Title */
.cd-title{
  color: #666;
  margin: 15px 0;
}

4. Finally, add the following JavaScript function into your project for table search filter and done.

(function() {
	'use strict';

var TableFilter = (function() {
 var Arr = Array.prototype;
		var input;
  
		function onInputEvent(e) {
			input = e.target;
			var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
			Arr.forEach.call(table1, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, filter);
				});
			});
		}

		function filter(row) {
			var text = row.textContent.toLowerCase();
       //console.log(text);
      var val = input.value.toLowerCase();
      //console.log(val);
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = onInputEvent;
				});
			}
		};
 
	})();

  /*console.log(document.readyState);
	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
      console.log(document.readyState);
			TableFilter.init();
		}
	}); */
  
 TableFilter.init(); 
})();

That’s all! hopefully, you successfully integrated this JavaScript search filter plugin into your project. If you have any questions or suggestions, let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.