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元素在工作。