Simple Query Table Search Filter
Hit is a basic filter search for tables. It is currently filtering and searching the entire table (thead and tbody). Is there a way to make this script search by body only? I want to exclude thead from the filtered results and I tried adding "id =" kwd_search "" only instead of the tag, but it makes the script not function. Another one that I would like it not to do is scaling table rows when searching for results.
Any help is greatly appreciated and thanks for reading. Here is a live demo of what I have . I am very slow with this stuff, so it would be really nice for me if I could return a live example if it is not much.
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#my-table tbody>tr").hide();
$("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#my-table tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
source to share
I didn't feel like debugging the approach contains-ci
. Can replace it withfilter()
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function() {
/* cache td elements to improve search performance*/
var $rows=$("#my-table tbody>tr"), $cells=$rows.children();
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function() {
var term = $(this).val()
// When value of the input is not blank
if(term != "") {
// Show only matching TR, hide rest of them
$rows.hide();
$cells.filter(function() {
return $(this).text().toLowerCase().indexOf(term) > -1;
}).parent("tr").show();
} else {
// When there is no input or clean again, show everything back
$rows.show();
}
});
});
source to share