Question

我找到了一个Jquery脚本，它根据输入字段对表进行过滤。这个脚本基本上采用过滤器，拆分每个单词并用每个单词过滤表行。所以最后你会得到一个包含输入字段中所有单词的行列表。

http://www.marceble.com/2010/02/simple-jquery-table-row-filter/

var data = this.value.split(" ");

$.each(data, function(i, v){
     jo = jo.filter("*:contains('"+v+"')");
});

现在，我需要的是不要过滤包含输入字段中每个单词的行。我想过滤包含输入字段中至少一个单词的所有行。

我尝试过的一种方法是将每个已过滤的列表转换为数组...

  var rows = new Array();

 $.each(data, function(i, v){
     rows[i] = jo.filter("*:contains('"+v+"')");
 });

在这个阶段，我必须在“行”数组中创建所有行的UNION并显示它们。我迷失了如何做到这一点。

以上脚本 - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

如果我在过滤器中输入“cat six”，我想显示三行。

Answer 1

看看这个jsfiddle。

我们的想法是使用函数来过滤行，这些行将遍历单词。

jo.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 the rows that match.
.show();

编辑：请注意，使用:contains()选择器无法实现不区分大小写的过滤，但幸运的是text()函数，因此过滤字符串应为大写，条件更改为{{1} }。看看这个jsfiddle。

Answer 2

无需构建阵列。您可以直接处理DOM。

尝试：

rows.hide();
$.each(data, function(i, v){
    rows.filter(":contains('" + v + "')").show();
});

<强> DEMO

修改

要发现符合条件的行而不立即显示它们，请将它们传递给函数：

$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    var _rows = $();//an empty jQuery collection
    $.each(data, function(i, v) {
        _rows.add(rows.filter(":contains('" + v + "')");
    });
    myFunction(_rows);
});

UPDATED DEMO

Answer 3

我选择了@nrodic的答案（顺便说一下，谢谢），但它有几个缺点：

1）如果您的行包含“cat”，“dog”，“mouse”，“cat dog”，“cat dog mouse”（每个在单独的行上），那么当您明确搜索“猫狗老鼠“，你会看到”猫“，”狗“，”老鼠“，”猫狗“，”猫狗老鼠“排。

2）.toLowerCase（）未实现，也就是说，当您输入小写字符串时，将不会显示具有匹配大写文本的行。

所以我想出了一个@nrodic代码的分支，在那里

var data = this.value; //plain text, not an array

和

jo.filter(function (i, v) {
    var $t = $(this);
    var stringsFromRowNodes = $t.children("td:nth-child(n)")
    .text().toLowerCase();
    var searchText = data.toLowerCase();
    if (stringsFromRowNodes.contains(searchText)) {
        return true;
        }
    return false;
})
//show the rows that match.
.show();

以下是完整的代码：http://jsfiddle.net/jumasheff/081qyf3s/

Answer 4

基于@ CanalDoMestre的回答。我添加了对空白过滤器案例的支持，修复了拼写错误并防止隐藏行，因此我仍然可以看到列标题。

    $("#filterby").on('keyup', function() {
        if (this.value.length < 1) {
            $("#list tr").css("display", "");
        } else {
            $("#list tbody tr:not(:contains('"+this.value+"'))").css("display", "none");
            $("#list tbody tr:contains('"+this.value+"')").css("display", "");
        }
    });

Answer 5

我有一个非常简单的功能：

function busca(busca){
    $("#listagem tr:not(contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

Answer 6

再添加一种方法：

value = $(this).val().toLowerCase();
$("#product-search-result tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});

Answer 7

tr：not（：contains（....为我工作

function busca(busca){
    $("#listagem tr:not(:contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

Answer 8

nrodic有一个惊人的答案，我只是想给你一个小小的更新，让你知道通过一个额外的小函数，你可以扩展contains methid以区分大小写：

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

Answer 9

我使用了Beetroot-Betroot的解决方案，但是我没有使用contains，而是使用了containsNC，这使得它不区分大小写。

$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

使用Jquery过滤表行

9 个答案:

修改