Use Input to Filter Table Rows

Question

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();
});

score 3 · Accepted Answer · edited Dec 22 '15 at 23:24

3

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

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

edited Dec 22 '15 at 23:24

David Hoelzer

15,862
4
48
67

answered Jun 27 '13 at 21:28

Shaddow

3,175
3
22
42

Well that is very good to know. I was not aware that :contains is case sensitive. Much appreciated. Also, in the other post I was looking at, it had ++d, I just forgot to correct it when I was reformatting it in my question but it's fixed now. I looked up how to make :contains case insensitive and found one work around (although I really don't like it and I'm sure there's a much better way, which I'll continue searching for). I'm updating my OP with that work around. And again, thanks so much for the help! – Brian Jun 27 '13 at 21:40

Use Input to Filter Table Rows

1 Answers1