Question

我有一个非常大的元素列表（14000+），我希望有一个搜索字段，当您在其中键入文本时，它会过滤结果并隐藏不相关的元素。

目前我正在使用它：

$.expr[':'].containsIgnoreCase = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$("#search").on("keyup", function () {
    var filter = $("#search").val();
    $(".list-group-item").not(":containsIgnoreCase('" + filter + "')").addClass("hidden");
    $(".list-group-item:containsIgnoreCase('" + filter + "')").removeClass("hidden");
});

在小型列表中可以很好地工作...这个列表太大了，无法用该代码进行管理。

我不知道是否还有其他代码可以处理客户端的这么多元素。如果没有，最好将列表留空，并在匹配时填写列表来执行ajax请求吗？

Answer 1

我认为有很多种方法可以优化搜索，但是你决定使用问题中显示的代码还是使用ajax调用我会建议通过使用节流来减少对搜索功能的调用次数/去抖。这将阻止在每次击键后调用搜索，而是在最后一次击键后的几毫秒内延迟搜索执行。例如，上面的代码可以更改如下：

function searchFunction () {
    var filter = $("#search").val();
    $(".list-group-item").not(":containsIgnoreCase('" + filter + "')").addClass("hidden");
    $(".list-group-item:containsIgnoreCase('" + filter + "')").removeClass("hidden");
}
$("#search").on("keyup", $.debounce(searchFunction, 300));

网上有很多开源实现的去抖功能，但在上面的例子中我使用了jquery-debounced。要查看其工作原理，请查看jsfiddle。 underscore.js library中提供了另一种实现方式。此外，我在这个问题上找到了一个很好的article。

使用javascript过滤大型列表

1 个答案: