jquery search filter


While working on tables with huge data and pagination, you might want to make the contents searchable and jquery allows you to do that easily.

First of all, add a search field in your page and give it an id. For this example, we're giving it the id search.

<input type="text" name="" id="search">

Now, we'll add a jquery script that'll be triggered by keyup function on that id. You can add a button too and trigger the event on submit as well.

				
<script>
$("#search").keyup(function() {
	var value = this.value;

	$("table").find("tr").each(function(index) {
		if (!index) return;
		var id = $(this).find("td").text();
		$(this).toggle(id.indexOf(value) !== -1);
	});
});
</script>	

Once the jquery is triggered it'll store the value sent vai that field ina variable named value here.

$("table").find("tr").each(function(index) {}) function will run the statement stated below it each time the table row content matches the value retrieved from the search field.

if (!index) return will stops the function and prevents the browser from running further codes in case no matches are found.

Then, another variable id is defined that holds the <td> with specified value.

Finally, $(this).toggle(id.indexOf(value) !== -1) will hide all the table rows that don't contain the specified value in one of their <td> and display only those <tr> that contain at least one <td> that matches the value sent via search field.

All the other table rows will return a value of -1 except those with content that matches the value sent via search field.

This way, you can add search functionality in your webpages with data in tabular format with greater convenience. You can even use this jquery search filter to find contents in a <div>, <p> or even <li> elements by simply replacing the HTML elements from the script.