JavaScript搜索系统–；搜索后未对齐的元素

所以，我有一个JavaScript搜索系统，除了一个问题外，它工作得很好：如果你从

中搜索某个东西，那么它会搞乱项目的定位。我有下面的图片，我希望它是可以理解的。在这张图片中，你可以看到所有的东西都是定位的、在线的等等

现在，我使用搜索来搜索项目“karambit”，如您所见，它不再有线条：

所以，我的问题是，这有可能以某种方式修复这个衬里吗

以下是我的搜索系统的JavaScript：

$（'SearchItemsFromList'）.keyup（函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis==“”）{
$（#inventory>li>div'）.show（）；
}否则{
$（'#inventory>li>div'）。每个（函数（）{
var text=$（this.text（）.toLowerCase（）；
（text.indexOf（valThis）>=0）？$（this.show（）：$（this.hide（）；
});
}
});

为了在那里显示这些项目，我正在使用插件

下面是这些项目的HTML代码，它们是用JavaScript编写的

append

ed

“+item.name+”+item.condition+“$”+Math.round（item.price）+“+message+”购物车
”；
}
}
}
});
}
var win=$（窗口）；
var-page=0；
renderItems（分页（项目，页面））；
win.scroll（函数（）{
if（$（document.height（）-win.height（）==win.scrollTop（））{
page++；
renderItems（分页（项目，页面））；
}
});

使用活动筛选器，您只隐藏内部的

div

s，而不是它们的父级

li

s。我猜它们的填充会导致混乱。请尝试将代码更改为：

$('#SearchItemsFromList').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis === "") {
        // find li not li > div
        $('#inventory > li').show();
    } else {
        // same here
        $('#inventory > li').each(function() {
            // use inner div for text comparison
            var text = $(this).find('> div').text().toLowerCase();
            // this is shorter to show/hide by true/false
            $(this).toggle(text.indexOf(valThis) >= 0);
        });
    }
});

---

使用活动筛选器时，您仅隐藏内部的

div

s，而不是它们的父级

li

s。我想它们的填充会导致混乱。请尝试将代码更改为：

$('#SearchItemsFromList').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis === "") {
        // find li not li > div
        $('#inventory > li').show();
    } else {
        // same here
        $('#inventory > li').each(function() {
            // use inner div for text comparison
            var text = $(this).find('> div').text().toLowerCase();
            // this is shorter to show/hide by true/false
            $(this).toggle(text.indexOf(valThis) >= 0);
        });
    }
});

---

请注意，这不是一个好的stackoverflow问题，所有元素都显示在一行中。另外，为什么不直接向我们显示url，而是一个图像？只有给出url才能在一行中提供帮助，因为它是压缩的。&它现在在我的本地主机上。请注意，这不是一个好的stackoverflow问题，所有元素都显示出来只需一行。另外，为什么不直接向我们显示url，而是一个图像？只有通过提供url才能在一行中提供帮助，因为它是压缩的。&它现在在我的本地主机上。谢谢！它可以工作，但还有一件事。。现在如果我删除

字母

从框中，然后它会重新加载所有项目，以及..这是否可能

重做所有搜索系统？我的网站上有一个无限滚动条，如果我搜索尚未显示的项目
，
它不会搜索它..我能以某种方式更改它吗？当前代码在DOM中搜索文本，它应该尊重新的项目添加到DOM中。但它无法通过ajax搜索无限滚动尚未加载的项目。在这种情况下，您应该更改无限滚动ajax调用，以便在服务器上进行搜索并仅提供过滤结果。然后它可以通过无限滚动正确加载下一块搜索结果。哦..我的无限滚动是有点不同，我会编辑我的第一篇文章。好吧，我添加了我的
无限卷轴
，它还有一个附加的物品卡片。谢谢！它可以工作，但还有一件事..现在如果我删除
字母
从框中，然后它会重新加载所有项目，以及..这是否可能
重做所有搜索系统？我的网站上有一个无限滚动条，如果我搜索尚未显示的项目
，
它不会搜索它..我能以某种方式更改它吗？当前代码在DOM中搜索文本，它应该尊重新的项目添加到DOM中。但它无法通过ajax搜索无限滚动尚未加载的项目。在这种情况下，您应该更改无限滚动ajax调用，以便在服务器上进行搜索并仅提供过滤结果。然后它可以通过无限滚动正确加载下一块搜索结果。哦..我的无限滚动是有点不同，我会编辑我的第一篇文章。好吧，我添加了我的
无限卷轴
，它还附加了物品卡片。