用javascript过滤大列表
我有一个非常大的元素列表（14000+），我想有一个搜索字段，当你在其中键入文本时，它会过滤结果并隐藏不相关的元素 目前我使用的是：用javascript过滤大列表,javascript,jquery,Javascript,Jquery,我有一个非常大的元素列表（14000+），我想有一个搜索字段，当你在其中键入文本时，它会过滤结果并隐藏不相关的元素 目前我使用的是： $.expr[':'].containsIgnoreCase = function (n, i, m) { return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; $("#search").on("keyup", function () { var
$.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/debounce来减少对搜索函数的调用次数。这将阻止在每个按键笔划后调用搜索，但会在最后一个按键笔划后将搜索执行延迟数毫秒。例如，可以按如下方式更改上述代码：
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));