堆栈社区,
我使用 .addClass 和 .removeClass 进行简单的 Ajax js 搜索,因为我发现它比 .show() 和 .hide() 更快。
问题是,它仍然不够快,我完全迷路了。
搜索可找到here
实际代码如下所示:Edit fiddle - JSFiddle - Code Playground
$(document).ready(function() {
// Schovat pocet pri nacteni
$("#vyhledavani_kompatibilit_pocet").hide();
$("#vyhledavani_kompatibilit_input").keyup(function() {
// Zobrazit pocet po napsani nejakeho vysledku
$("#vyhledavani_kompatibilit_pocet").show();
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
var searchKeyword = $(this).val();
if (searchKeyword.length >= 3) {
// Loop through the comment list
$(".komp").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).addClass("schovatDiv");
if ($(this).siblings(':hidden')) {
$(this).parent().prev().addClass("schovatDiv");
}
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).parent().prev().removeClass("schovatDiv");
$(this).removeClass("schovatDiv");
count++;
}
});
} else {
$("#vyhledavani_kompatibilit_pocet").hide();
$(".komp").parent().prev().removeClass("schovatDiv");
$(".komp").removeClass("schovatDiv");
};
// Update the count
var numberItems = count;
{
$("#vyhledavani_kompatibilit_pocet").text(count);
}
});
});
有什么方法可以加快搜索速度,这样当您在搜索字段中输入“东芝”时,过滤器就不会花费 8 秒的时间?
感谢您的任何提前或提示。 :)
最佳答案
您可以通过不渲染所有内容而仅渲染可见部分来提高性能。 然后它就可以非常快地工作。
关于javascript - 加快 UL LI 列表中超过 5000 个对象的 AJAX 搜索速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44005465/