CODEWITHSUNDEEP
javascriptjquerysearchfilter
K M Rakibul Islam
K M Rakibul Islam

Reputation: 34338

Filtering table data based on search keyword using jQuery

I want to accomplish one simple thing using jQuery. I want to filter some table data on a page and there is a search box on top of the same page.

On every keystroke, I want to hide each row that does not match the search field. I want to process only client side data. How can I accomplish this?

Can anyone please give some example code of this? Like, how can I grab each keystroke and hide the required elements? I want something like this.

Upvotes: 1

Views: 1728

Answers (2)

HJ05
HJ05

Reputation: 1368

It's a little old now, but I've used this plug-in in a project before and it worked great: https://github.com/riklomas/quicksearch

Upvotes: 1

dsgriffin
dsgriffin

Reputation: 68616

You need to use onkeydown, then grab it's val(), then find out if what the value :contains, matches up against whatever elements your using to compare it against, then hide() whatever elements do not match this condition and voila.

HTML: 

<input type = "text" id="theText">

JQuery to get it's current value and display it on the console:

$('#theText').onkeydown(function(){

var x = $('#theText').val();

console.log(x);

});

Upvotes: 1

Related Questions