javascript - 使用javascript过滤大列表

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 调用，我都建议作为一种改进，通过使用 throttle 来减少对搜索功能的调用次数/去抖动。这将防止在每次击键后调用搜索，而是会在最后一次击键后延迟搜索执行数毫秒。例如上面的代码可以修改如下:

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关于这个问题。