1

どの要素を検索可能にするかを指定するjQuery Live Search pluginに問題があります。この問題を示すために、いくつかの jsFiddles を作成しました。

注: jQuery Live Search のデフォルトの使用法では、単に単語のリスト ( demo ) をフィルター処理します。ただし、私の希望する使用法は、リスト項目内のコンテンツのブロックからフィルタリングします。

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

だから問題は何ですか？

を検索可能な要素としてターゲティングする<li>と問題なく機能します。その中のすべてのコンテンツがライブ検索結果で検索可能になります。

<h2>ただし、 （検索可能にしたい唯一の部分）をターゲットにすると、カウンターが正しい結果を表示しているにもかかわらず、結果リストが壊れます（すべてが非表示になります）。

どうやって再現するの？

を検索可能領域としてターゲットにするプラグインを使用して、この動作中の Fiddleを確認してください。<li>ご覧のとおり、国 (大文字と小文字を区別) の検索は正しく機能し ( <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 に答える