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

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

网上有许多 debounce 函数的开源实现，但在上面的例子中，我使用了jquery-debounced。为了了解这是如何工作的，请检查这个jsfiddle。underscore.js library 中提供了另一种实现。我还发现了一篇关于这个主题的好文章。