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.
Similar Code Snippets:
Expand and Collapse div using JavaScript
Profit & Loss Calculator in JavaScript
Short Story Generator with Specific Words in JavaScript
JavaScript Audio Player with Playlist
Progressive Image Loading in JavaScript
Neumorphism Login and Signup Form
Custom Captcha Security in JavaScript
Search Bar with Suggestions using jQuery Autocomplete.js
JavaScript Move Focus with Arrow Keys
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.
hi
using your code (pasted below) can’t seem to get search to work
i open in browser and table etc display very nicely but filter search does not work
please advise
thanks!
.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; }(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(); })();Hi David!
Please make sure you properly followed the tutorial. Secondly, check console errors if something is going wrong.
If you are still facing the problem, download the code snippet and edit the HTML file and add your table data into it.
hi
1. your idea worked out. went over tutorial. now code works as should. fantastic
2. how would I make following modification.
3. table when first opened displays entire table.
4. is there a way to pass a dummy “filter/search request” as part of INIT so that table displays not in its entirety?
thanks!
Hi David!
Yes, it’s possible to pass a value in search input to show filtered data. To do this, follow the steps:
1. Add a value attribute to the input element and define a unique id for this:
2. Add the following script just before the closing of the body tag:
<script> var tableSearch = document.getElementById('tableSearchInput'); if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("input", false, true); tableSearch.dispatchEvent(evt); } else { tableSearch.fireEvent("oninput"); } </script>You can pass the keyword inside the value attribute, the table data will be filtered accordingly on load.
Hi
great!
1. so this new value attribute is instead of current or in addition to?
if latter, place it right after current?
2. currently before body tag is
the new code can be part of this?
thanks!
PS
can’t thank you enough. i am a former AS/400 RPG programmer getting my feet wet with html/css/js
You’re welcome dude!
Add the value attribute and id to existing input. Similarly, the JS script place in your HTML file just after the other scripts.
PERFECT!
do you have PayPal or Zelle that I can send small token of appreciation?
I could not express my feelings in words. I have sent you my bank details in your email, please check that!
Hi,
Thanks so much for this; really helpful and improved what I had before! Please could you help me with a couple of things?
I’d like to change the text in the search box to be darker/black etc. is that possible?
Also when I search (it works perfectly to do so), I’d like to leave the top row of headings. I’ve tried adding a for loop but it didn’t work out. I’m quite new to html/js so learning as I go! Thanks 🙂
Hi,
Thank you for this code, it has improved what I already had. Is it possible to change the font colour of the text in the search box – I’d like it more obvious? And is it possible to keep the headings of the columns when searching; at the moment they disappear.
Thanks again
Emma