使用Ajax Js搜索div -页面上的文本太多

Question

我们在Prestashop上运行电子商店，我们需要创建Ajax搜索来查找页面上的电池和适配器兼容性。

我已经编写了这个代码：https://jsfiddle.net/fgfjo2n9/

我有两个问题。

·第一，我需要输出只显示具有兼容性的标题，而不是所有标题。图片：http://imgur.com/a/XAupI

·第二，我们有很多兼容性，所以当您尝试搜索时，页面速度非常慢。有没有没有数据库的方法来提高搜索的速度？

慢速加载演示：www.powerparts.cz/adaptery-k-notebookum/9-nabijecka-na-notebook-asus-lenovo-msi-toshiba-19v-342a-55x25#idTab_dm_newtab

非常感谢您的帮助和建议。

Answer 1

若要仅显示具有兼容性的标题，可以更改$(".komp").each函数如下

$(".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).fadeOut();
        //added
        if($(this).siblings(':hidden')) {
            $(this).parent().prev().fadeOut();
        }

    // Show the list item if the phrase matches and increase the count by 1
    } else {
        $(this).parent().prev().fadeIn(); //added
        $(this).show();
        count++;
    }
}); 

：检查是否所有兄弟姐妹/项都隐藏($(this).siblings(':hidden'))，如果是，则将父级的前一个元素(标题) fadeOut fadeOut(标题)，如果其中任何一个兄弟/项与搜索匹配，则显示(fadeIn)标题。

小提琴在这里

其次，为了提高搜索的性能，您可以实现一些技术，比如Lazy body &将很少的脚本移到主体底部等等。还有更多的内容，因此为您提供了可以通过的链接。

• https://friendlybit.com/js/lazy-loading-asyncronous-javascript/
• http://desalasworks.com/article/javascript-performance-techniques/