javascript - 使用 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

要仅显示具有兼容性的标题，您可以像这样更改您的 $(".kom​​p").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++;
    }
}); 

解释:检查是否所有 sibling /元素都被隐藏($(this).siblings(':hidden'))，如果是，fadeOut parent 的前一个元素(标题)，否则如果任何一个兄弟/项目与搜索匹配，则显示(淡入)标题。

Fiddle here

其次，要提高搜索性能，您可以实现延迟加载和将少量脚本移动到正文底部等技术。还有更多到它，因此为您提供了链接。

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