Filtering Table rows using Jquery

Question

I found a Jquery script that does the table filtering stuff based on input field. This script basically takes the filter, splits each word and filters table rows with each word. So at the end you'll have a list of rows that have all the words in the input field.

http://www.marceble.com/2010/02/simple-jquery-table-row-filter/

var data = this.value.split(" ");  $.each(data, function(i, v){      jo = jo.filter("*:contains('"+v+"')"); }); 

Now, what I need is that instead of filtering rows that contains each of the words in the input field. I want to filter all the rows that contain at least one of the word in the input field.

One way I've tried is to take each filtered lists into an array...

  var rows = new Array();   $.each(data, function(i, v){      rows[i] = jo.filter("*:contains('"+v+"')");  }); 

At this stage, I have to make a UNION of all the rows in "rows" array and show them. I'm lost on how to do that exactly.

Above script in action - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

If I type "cat six" in the filter, I want to show three rows.

Answer 1

Have a look at this jsfiddle.

The idea is to filter rows with function which will loop through words.

jo.filter(function (i, v) {     var $t = $(this);     for (var d = 0; d < data.length; ++d) {         if ($t.is(":contains('" + data[d] + "')")) {             return true;         }     }     return false; }) //show the rows that match. .show(); 

EDIT: Note that case insensitive filtering cannot be achieved using :contains() selector but luckily there's text() function so filter string should be uppercased and condition changed to if ($t.text().toUpperCase().indexOf(data[d]) > -1). Look at this jsfiddle.

Answer 2

There's no need to build an array. You can address the DOM directly.

Try :

rows.hide(); $.each(data, function(i, v){     rows.filter(":contains('" + v + "')").show(); }); 

DEMO

EDIT

To discover the qualifying rows without displaying them immediately, then pass them to a function :

$("#searchInput").keyup(function() {     var rows = $("#fbody").find("tr").hide();     var data = this.value.split(" ");     var _rows = $();//an empty jQuery collection     $.each(data, function(i, v) {         _rows.add(rows.filter(":contains('" + v + "')");     });     myFunction(_rows); }); 

UPDATED DEMO