44

我找到了一个 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+"')");
 });

在这个阶段，我必须对“rows”数组中的所有行进行 UNION 并显示它们。我不知道如何准确地做到这一点。

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

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

4

9 回答 9

88

看看这个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()功能，因此过滤器字符串应该大写并且条件更改为if ($t.text().toUpperCase().indexOf(data[d]) > -1). 看看这个jsfiddle。

于 2013-06-12T20:52:28.323 回答
29

无需构建数组。您可以直接寻址 DOM。

尝试 ：

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

演示

编辑

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

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

更新的演示

于 2013-06-12T20:49:25.173 回答
5

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

1) 如果您有包含“cat”、“dog”、“mouse”、“cat dog”、“cat dog mouse”的行（每行都在单独的行上），那么当您明确搜索“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/

于 2015-01-12T10:03:38.457 回答
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", "");
        }
    });
于 2014-02-12T21:56:50.813 回答
3

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

function busca(busca){
    $("#listagem tr:not(contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}
于 2013-11-05T23:23:05.110 回答
2

tr:not(:contains(.... 为我工作

function busca(busca){
    $("#listagem tr:not(:contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}
于 2016-02-03T11:31:52.263 回答
2

nrodic 有一个惊人的答案，我只是想提供一个小的更新，让您知道通过一个小的额外功能，您可以扩展 contains 方法以区分大小写：

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});
于 2016-04-27T09:43:42.617 回答
2

添加另一种方法：

value = $(this).val().toLowerCase();
$("#product-search-result tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
于 2019-08-05T00:19:37.143 回答
1

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

$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
于 2016-09-12T15:25:57.017 回答