Client-side table lookup using jQuery

Question

Suppose I have a standard HTML table structure, for example:

<table class="table table-striped table-hover table-bordered table-condensed"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Added</th> </tr> </thead> <tbody> <tr id="1a0daa2734" class="item"> <td><a href="/view/1a0daa2734">Item Number 1</a></td> <td>A</td> <td>8/1/2012 10:18:34 PM</td> </tr> <tr id="b1ff6e0ac" class="item"> <td><a href="/view/b1ff6e0ac">Item Number 2</a></td> <td>B</td> <td>8/2/2012 5:48:54 PM</td> </tr> <tr id="edd8b70893" class="item"> <td><a href="/view/edd8b70893">Item Number 3</a></td> <td>A</td> <td>8/13/2012 3:55:41 PM</td> </tr> </tbody> </table> 

I am trying to write client side search using jQuery. Basically, I have a search box with the identifier search-items .

  $("#search-items").bind("keyup paste", function() { var searchText = $("#search-items").val(); $(".item").each(function() { //??? }); }); 

What is the best way to take the search-items value and find NON-MATCHES inside the body? I want no coincidence, because these are the elements that I will hide.

It should only look for the first two td elements, so the name and type columns are not added .

Thanks.

Answer 1

The following code will try to match the values ​​when entering them in columns 1 or 2.

 $("#search").on("keyup paste", function() { var value = $(this).val().toUpperCase(); var $rows = $("table tr"); if(value === ''){ $rows.show(); return false; } $rows.each(function(index) { if (index !== 0) { $row = $(this); var column1 = $row.find("td:first a").html().toUpperCase(); var column2 = $row.find("td").eq(1).text().toUpperCase(); if ((column1.indexOf(value) > -1) || (column2.indexOf(value) > -1)) { $row.show(); } else { $row.hide(); } } }); });​ 

DEMO - Search for your table in columns 1 and 2 of the value separately (not added)

I'm sure there is a much more efficient way to write, but this should get you started.

Answer 2

How about something like that?

 function escapeRegex(value) { return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&"); } $(function() { $("#search-items").bind("keyup paste", function() { var searchText = $("#search-items").val(), regex = new RegExp(escapeRegex(searchText), "gi"), $items = $(".item").show(); if (searchText) { $items.each(function() { var $tds = $("td", this).slice(0, 2), // only the first two columns text = $tds.text(); if (text.search(regex) === -1) { $(this).hide(); } }); } }); });​ 

Example: http://jsfiddle.net/Pc7Nk/1/

The escapeRegex function was shamelessly stolen from jQueryUI autocomplete source code.

Answer 3

Going line by line, find the first td (you can also add n the number of td elements that you want to combine if you want .. text () will return the string using the string search method .search, you return the index of the first match, -1 is returned if there was no match, so we hide the line.

 $("#search-items").bind("keyup paste", function() { var searchText = $("#search-items").val(); $(".item").each(function() { var $this = $(this) if ($this.find('td:first-child').text().search(searchText) === -1) { $this.hide() } }); });