jQuery Live搜索：指定可搜索元素

Question

我在jQuery Live Search plugin中遇到了一些问题，指定哪些元素应该可搜索。我创建了几个jsFiddles来演示这个问题。

注意： jQuery Live搜索的默认用法只是过滤一个单词列表（​​）。我期望使用从不过内容块过滤列表项中：

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

那么，有什么问题呢？

针对<li>作为可搜索元素正常工作 - 其中的所有内容都变为可在实时搜索结果中搜索。

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

如何重现？

检出this working Fiddle，插件的目标是<li>作为可搜索区域。如您所见，搜索国家（区分大小写）工作正常（<h2>）以及搜索返回所有4个结果的“Lorem”（<p>也可搜索）。

我想要做的只是使<h2>可搜索，而不是<li>内的任何其他内容。与该集合的Here's a Fiddle。现在，当搜索一个国家时，会显示正确的结果编号，但该结果的<li>保持不正确。搜索“Lorem”正确地返回没有结果和结果数字0.

看起来当<li>中的某个元素被定位时，它会中断<li>本身的显示/隐藏。这是插件的错误还是我做错了什么？

非常感谢！

Answer 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仍然隐藏。

的解决方案是，以显示h2的父li的结果，就像这样：

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

这就解释了为什么当你先前针对li元素在工作。