Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to perform a real time search and filter on a HTML table?
When dealing with large datasets in web applications, implementing search functionality in HTML tables significantly improves user experience. Instead of manually scanning through hundreds or thousands of rows, users can quickly filter table data by typing search terms. This article demonstrates how to implement real-time search and filter functionality using both vanilla JavaScript and jQuery.
Syntax
Following is the basic syntax for implementing table search using JavaScript
if (td) {
if (txtValue.toLowerCase().indexOf(search_value) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
For jQuery implementation
$("#tableId tr").filter(function () {
$(this).text().toLowerCase().indexOf(value) > -1 ?
$(this).show() : $(this).hide()
});
Using JavaScript to Perform Real-time Search and Filter
This approach uses the indexOf() method to check if any table cell contains the search value as a substring. The method iterates through all table rows and shows or hides them based on the search criteria.
Implementation Steps
-
Step 1 Access all table rows using
getElementsByTagName("tr"). -
Step 2 Iterate through each row using a for loop, starting from index 1 (skip header row).
-
Step 3 Get the first cell of each row to search within specific columns.
-
Step 4 Extract text content using
textContentorinnerTextproperty. -
Step 5 Convert both search value and cell text to lowercase for case-insensitive search.
-
Step 6 Use
indexOf()to find if search value exists in cell text. -
Step 7 Show the row if match found (indexOf > -1), otherwise hide it.
Example JavaScript Table Search
Following example demonstrates real-time search functionality on a fruit table using vanilla JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Table Search</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input { width: 300px; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { text-align: left; padding: 12px; border: 1px solid #ddd; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h3>Real-time Fruit Table Search using JavaScript</h3>
<input type="text" id="fruit_value" onkeyup="searchFruits()" placeholder="Search for fruit names...">
<table id="fruit_table">
<tr>
<th>Fruit Name</th>
<th>Color</th>
<th>Calories</th>
</tr>
<tr><td>Apple</td><td>Red</td><td>95</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>105</td></tr>
<tr><td>Orange</td><td>Orange</td><td>45</td></tr>
<tr><td>Kiwi</td><td>Green</td><td>42</td></tr>
<tr><td>Blueberry</td><td>Blue</td><td>57</td></tr>
<tr><td>Strawberry</td><td>Red</td><td>49</td></tr>
<tr><td>Raspberry</td><td>Red</td><td>64</td></tr>
</table>
<script>
function searchFruits() {
let fruit_input = document.getElementById("fruit_value");
let search_value = fruit_input.value.toLowerCase();
let fruit_table = document.getElementById("fruit_table");
let tr = fruit_table.getElementsByTagName("tr");
for (let i = 1; i < tr.length; i++) {
let td = tr[i].getElementsByTagName("td")[0];
if (td) {
let txtValue = td.textContent || td.innerText;
if (txtValue.toLowerCase().indexOf(search_value) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
Try searching for "apple", "berry", or "red" to see the filter in action. Only matching rows will remain visible.
Using jQuery to Perform Real-time Search and Filter
jQuery provides a more concise approach using the filter() method combined with show() and hide() methods. This approach is more elegant and requires less code.
Implementation Steps
-
Step 1 Use the
keyup()event to trigger filtering when users type in the search input. -
Step 2 Get the search value and convert it to lowercase for case-insensitive matching.
-
Step 3 Select all table rows and apply the
filter()method. -
Step 4 In the filter callback, get row text and check if it contains the search value.
-
Step 5 Use ternary operator with
show()andhide()methods to display results. -
Step 6 Always show the header row to maintain table structure.
Example jQuery Table Search
Following example shows real-time search on a programming languages table using jQuery
<!DOCTYPE html>
<html>
<head>
<title>jQuery Table Search</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input { width: 300px; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { text-align: left; padding: 12px; border: 1px solid #ddd; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h3>Real-time Programming Languages Search using jQuery</h3>
<input type="text" id="lang_value" placeholder="Search for languages, types, or ratings...">
<table id="programming_lang">
<tr>
<th>Language Name</th>
<th>Language Type</th>
<th>Rating</th>
</tr>
<tr><td>C</td><td>Procedural</td><td>4</td></tr>
<tr><td>C++</td><td>Object Oriented</td><td>5</td></tr>
<tr><td>Java</td><td>Object Oriented</td><td>5</td></tr>
<tr><td>Python</td><td>Object Oriented</td><td>5</td></tr>
<tr><td>PHP</td><td>Scripting</td><td>3</td></tr>
<tr><td>JavaScript</td><td>Scripting</td><td>5</td></tr>
<tr><td>C#</td><td>Object Oriented</td><td>4</td></tr>
<tr><td>Ruby</td><td>Scripting</td><td>4</td></tr>
<tr><td>Swift</td><td>Object Oriented</td><td>3</td></tr>
<tr><td>Go</td><td>Procedural</td><td>3</td></tr>
</table>
<script>
$('#lang_value').keyup(function () {
let value = $(this).val().toLowerCase();
$("#programming_lang tr").filter(function () {
$(this).text().toLowerCase().indexOf(value) > -1 ?
$(this).show() : $(this).hide();
});
$('#programming_lang tr:first').show();
});
</script>
</body>
</html>
Try searching for "object", "scripting", "java", or rating "5" to see how the jQuery filter works across all columns.
Advanced Multi-Column Search
For more comprehensive search functionality, you can modify the JavaScript approach to search across all columns instead of just the first one
Example Multi-Column Search
<!DOCTYPE html>
<html>
<head>
<title>Multi-Column Table Search</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input { width: 400px; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { text-align: left; padding: 12px; border: 1px solid #ddd; }
th { background-color: #f2f2f2; }
.highlight { background-color: #fffacd; }
</style>
</head>
<body>
<h3>Multi-Column Search with Highlighting</h3>
<input type="text" id="search_input" onkeyup="searchAllColumns()" placeholder="Search across all columns...">
<table id="data_table">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr><td>Laptop</td><td>Electronics</td><td>$999</td><td>25</td></tr>
<tr><td>Coffee Maker</td><td>Appliances</td><td>$89</td><td>15</td>< 
2K+ Views
