Utilisez l'entrée pour filtrer les lignes du tableau

Question

Après avoir consulté d'autres questions SO concernant cela, je n'ai toujours pas réussi à comprendre comment faire fonctionner cela dans mon cas. J'ai un tableau avec quelques lignes et un contrôle d'entrée au-dessus dont j'ai besoin pour filtrer en fonction de ce qui est tapé. Chaque ligne a un bouton Supprimer que je n'ai pas connecté dans mon jsFiddle. Cela fonctionne bien sur ma page réelle.

Mon principal problème concerne le filtre lui-même. Il ne filtre certainement pas correctement et je n'ai aucune idée de comment prendre en compte le bouton Supprimer. Que dois-je faire pour que lorsque je commence à taper dans le filtre, le texte du bouton ("Supprimer") soit ignoré et que les lignes soient filtrées correctement ?

Voici un jsFiddle semi-fonctionnel et par "semi-fonctionnel", je veux dire, si vous tapez la lettre 'r', tout est filtré sauf une ligne. Presque toutes les autres lettres que vous tapez, tout est filtré.

Code de filtre

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

Grâce à ce post, j'ai pu faire un petit début mais je suis juste bloqué maintenant...: https://stackoverflow.com/a/17075148/738262

CODE FONCTIONNEL

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

Answer 1

:contains est sensible à la casse. Lorsque vous tapez r, il ne trouve pas Running, juste Bar.

Aussi dans la boucle for il devrait y avoir un d++.