CODEWITHSUNDEEP
jqueryfilter
Brian
Brian

Reputation: 1184

Use Input to Filter Table Rows

After looking through some other SO questions regarding this I still haven't been able to figure out how to get this to work in my case. I have a table with a few rows and a input control above it which I need to filter based on what is typed. Each row has a Delete button which I didn't wire up in my jsFiddle. That works fine on my real page.

My main issue is with the filter itself. It definitely does not filter correctly and I have no idea how to take into account the Delete button. What do I need to do so when I start typing in the filter, the button text ("Delete") will be ignored and the rows will filter correctly?

Here is a semi-working jsFiddle and by "semi-working" I mean, if you type the letter 'r', everything is filtered but one row. Most every other letter you type, everything is filtered.

Filter Code

<script>
$("#searchFilter").keyup(function () {
    var data = this.value.split(" ");
    var tbl = $("#table1").find("tr");
    if (this.value == "") {
        tbl.show();
        return;
    }
    tbl.hide();
    tbl.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();
});
</script>


Thanks to this post I was able to get a little start but just stuck now...: https://stackoverflow.com/a/17075148/738262



WORKING CODE

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$("#searchFilter").keyup(function () {
    var data = this.value.split(" ");
    var tbl = $("#table1").find("tr");
    if (this.value == "") {
        tbl.show();
        return;
    }
    tbl.hide();
    tbl.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();
});

Upvotes: 2

Views: 4102

Answers (1)

Shaddow
Shaddow

Reputation: 3215

:contains is case sensitive. When you type r it doesn't find Running, just Bar.

Also in the for loop should be a d++.

Upvotes: 3

Related Questions