Developers dealing with a real-time web application often have to manage a large amount of data. For instance, if we have a table presenting a list of 100000 products, users may find it difficult to scroll through the whole table to locate a particular product. Adding a search functionality can greatly improve the user experience, allowing users to search for specific data in the table. In this article, we’ll see how to add search functionality to a table using JavaScript and jQuery.
|
Methods |
Description |
|---|---|
|
This method is used to filter out all the elements that do not match the selected criteria and those matches will be returned. Reduce the set of matched elements to those that match the selector or pass the function’s test. |
|
|
This method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. Display or hide the matched elements. |
Approach:
- Create an HTML table with relevant headings and rows and include an input element for the user to type the search query.
- Apply basic styling to the table, such as setting borders and width, and style the headings and other elements for a clean presentation.
- Include jQuery library for easier DOM manipulation and use JavaScript/jQuery to capture user input from the search input.
-
Capture the user input from the search box in a variable (e.g.,
value) and Convert the search value to lowercase for case-insensitive comparison. -
Use the
filter()function to iterate through each table row and apply thetoggle()method to show or hide rows based on whether the search word is found in each row. -
Utilize
indexOf(value)to check if the search word is present in the row, and hide rows where it’s not found.
Example: This example illustrates the use of filter() and toggle() function to perform a realtime search and filter on HTML table.
<!DOCTYPE html><html>
<head>
<title>Perform a real-time search on HTML table</title>
<script src=
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: green;
}
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
}
th,
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Perform a real-time search and filter on an HTML table</h3>
<b>Search the table for Course, Fees, or Type:
<input id="gfg" type="text" placeholder="Search here">
</b>
<table>
<tr>
<th>Course</th>
<th>Duration</th>
<th>Type</th>
</tr>
<tbody id="geeks">
<tr>
<td>C++ STL</td>
<td>1499</td>
<td>Online Classes</td>
</tr>
<tr>
<td>DSA Foundation</td>
<td>7999</td>
<td>Regular Classes</td>
</tr>
<tr>
<td>Geeks Classes</td>
<td>10799</td>
<td>Weekend Classes</td>
</tr>
<tr>
<td>Placement 100</td>
<td>9999</td>
<td>Online Classes</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$("#gfg").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#geeks tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
|
Output: