1

我在使用jQuery Live Search 插件时遇到了一些问题，指定哪些元素应该是可搜索的。我创建了几个 jsFiddles 来演示这个问题。

注意： jQuery Live Search 的默认用法只是过滤单词列表（demo）。但是，我想要的用法从列表项中的内容块中过滤：

<li>
    <h2>Australia</h2>
    <p>Lorem ipsum dolor sit amet.</p>
<li>

所以有什么问题？

将 定位<li>为可搜索元素效果很好 - 其中的所有内容都可以在实时搜索结果中搜索。

然而，尽管计数器显示了正确的结果，但定位<h2>（我想要搜索的唯一部分）会导致结果列表中断（全部隐藏）。

我如何重现？

使用以可搜索区域为目标的插件查看此工作小提琴。<li>正如您将看到的，搜索一个国家（区分大小写）可以正常工作（the <h2>）以及搜索“Lorem”返回所有 4 个结果（<p>也是可搜索的）。

我想要做的是只使<h2>可搜索的，而不是<li>. 这是那套小提琴。现在，当搜索一个国家时，会显示正确的结果编号，但该结果的编号<li>仍然不正确地隐藏。正确搜索“Lorem”不会返回任何结果，结果编号为 0。

似乎当<li>目标中的元素时，它会破坏<li>自身的显示/隐藏。这是插件的错误还是我做错了什么？

非常感谢！

4

1 回答 1

1

问题在于这个回调：

on.results(function(results) {
    $('.no-filter-results').hide();
    $('.filter-results li').hide();
    results.show();
});

该results参数包含对您要定位的元素（在本例中为h2元素）的引用。

您正在将所有li元素设置为在此行中首先隐藏：

$('.filter-results li').hide();

然后将h2元素设置为使用此行可见：

results.show();

显然这不起作用，因为父级li仍然隐藏。

解决方案是在结果中显示父li级h2，如下所示：

results.parent('li').show();

这解释了为什么在您之前定位该li元素时它会起作用。

于 2012-04-26T21:59:13.287 回答