Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to perform a real time search and filter on a HTML table?
When developers develop a real-time web application, they need to deal with a large amount of data. For example, we have listed 1000 product data in the table format on the web page. If users want to find any particular product from the table, they need to scan the whole table by scrolling through it, which is a very bad user experience.
So, it is necessary to add a search functionality to the table to allow users to search for any specific data in the table. Here, we will learn to add search functionality to the table using JavaScript and jQuery.
Using JavaScript to Perform a Real-time Search and Filter on an HTML Table
In this section, when users search for any values in the table, we will iterate through all table data and search for the input value. Also, we will use the indexOf() method to check whether any cell data contains a search value as a substring.
Syntax
Users can follow the syntax below to search for any values in the table.
if (td) {
if (txtValue.toLowerCase().indexOf(search_value) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
In the above syntax, we check whether the current cell contains the search value as a substring. If yes, we show the particular row of the table. Otherwise, we hide the table.
Steps
Step 1 − Access all rows of the table using the tag name.
Step 2 − Use the for loop to iterate through the array of rows.
Step 3 − In the for loop, access all columns of the ith row, and get the first cell.
Step 4 − Use the innerText or textContent property to get the text of the cell and store it in the textValue.
Step 5 − Use the toLowerCase() method to convert the text value to lowercase.
Step 6 − Use the indexOf() method to check if the search value is a substring of the current cell’s text value.
Step 7 − If the indexOf() method returns ‘-1’, hide the current row by changing the display property. Otherwise, show it on the web page.
Example 1
We created the HTML table containing the fruit details in the example below. Also, we styled the table using some CSS properties. Furthermore, we created the input element to take the search input from users. We call the searchFruits() function whenever users change the input value.
In the searchFruits() function, we access the input values and table. After that, we perform the filter operation on the table rows and show and hide them based on whether the rows contain search value.
<html>
<head>
<style>
table {margin-top: 20px; border-collapse: collapse; border: 1px solid black; font-size: 18px;}
th, td {text-align: left; padding: 12px; border: 2px solid black;}
</style>
</head>
<body>
<h3> Using the <i> indexOf() method of JavaScript </i> to perform a real time search and filter on the table data </h3>
<input type="text" id="fruit_value" onkeyup="searchFruits()" placeholder="Search for fruit names..">
<table id="fruit_table">
<tr> <th> Fruit name </th><th> Fruit 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 (i = 1; i < tr.length; i++) {
// get the first column of every row
let td = tr[i].getElementsByTagName("td")[0];
if (td) {
// get the text content of the table cell
txtValue = td.textContent || td.innerText;
// If the search value is found in the table cell, show the row, otherwise hide it
if (txtValue.toLowerCase().indexOf(search_value) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</html>
Using JQuery to Perform a Real-time Search and Filter on an HTML Table
In this section, we will use the filter() and indexOf() methods of JQuery to filter the table rows. Also, we will perform the search operations on each table row.
Syntax
Users can follow the syntax below to filter table rows using jQuery.
$("#programming_lang tr").filter(function () {
$(this).text()
.toLowerCase().indexOf(value) > -1 ? $(this).show() :
$(this).hide()
});
We applied the filter() method in the above syntax on each table row. Also, we used the show() and hide() methods to show and hide rows on the web page, respectively.
Steps
Step 1 − Use the keyUp() method to perform filter operation when users change the value of the search input.
Step 2 − In the callback function of the keyUp() method, access search input values and convert them to lowercase using toLowerCase() method.
Step 3 − Now, access all table rows, and apply the filter() method.
Step 4 − In the filter() method's callback function, access the row text, convert it to lowercase, and use the indexOf() method to find an index of the search value in the row text.
Step 5 − If the indexOf() method returns greater than -1, usefxdsea the show() method to show the row. Otherwise, use the hide() method to hide the row.
Example 2
In the example below, we created the table containing the data of programming languages. Also, we added the search functionality, as explained in the above steps. Users can try to search for any value in the table and observe the search results.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
table {margin-top: 20px;border-collapse: collapse;border: 1px solid black;font-size: 18px;}
th,td {text-align: left;padding: 12px;border: 2px solid black;}
</style>
</head>
<body>
<h3> Using the <i> JQuery's filter() method </i> to perform a real time search and filter on the table data </h3>
<input type="text" id="lang_value" placeholder="Search for table data..">
<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>
</html>
946 Views
To Continue Learning Please Login