Question

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

我已经制作了这段代码：https://jsfiddle.net/fgfjo2n9/

我有两个问题。

•1日我需要输出只显示带有兼容性的标题，而不是所有标题。图片：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父母＆＃39;上一个元素（标题）否则，如果兄弟姐妹/项目中的任何一个与搜索匹配，则显示（fadeIn）标题。

Fiddle here

其次，要提高搜索效果，您可以实施延迟加载等技术。将少量脚本移动到身体的底部等。还有更多的脚本，因此为您提供了链接。

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

1 个答案: