jquery - 入力を使用してテーブル行をフィルター処理する

Question

これに関する他のSOの質問をいくつか調べた後、私の場合、これを機能させる方法をまだ理解できていません。いくつかの行を持つテーブルがあり、その上に入力コントロールがあり、入力内容に基づいてフィルター処理する必要があります。各行には、jsFiddle で接続していない [削除] ボタンがあります。それは私の実際のページでうまくいきます。

私の主な問題は、フィルター自体にあります。それは間違いなく正しくフィルタリングされず、[削除] ボタンを考慮する方法がわかりません。フィルターに入力を開始すると、ボタンのテキスト (「削除」) が無視され、行が正しくフィルター処理されるようにするにはどうすればよいですか?

これは半機能のjsFiddle です。「半機能」とは、文字「r」を入力すると、1 行を除いてすべてがフィルター処理されることを意味します。入力するほとんどすべての文字で、すべてがフィルター処理されます。

フィルタ コード

<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>

この投稿のおかげで、少し始めることができましたが、今は立ち往生しています...: https://stackoverflow.com/a/17075148/738262

作業コード

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