我有一个非常大的元素列表(超过 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 请求以在匹配时填充列表会更好吗?
最佳答案
我认为有很多可能的方法来优化搜索,但是无论您决定使用问题中显示的代码还是使用 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关于这个问题。
关于javascript - 使用javascript过滤大列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27518993/