0

jQueryを使用して、ユーザーがクエリとして入力した内容に基づいてアイテムのリストをフィルタリングする簡単な検索機能を構築しています。単純な一致だけで、派手なアルゴリズムは実行されません。

ここでフィドル：http：//jsfiddle.net/T7hF3/

ご覧のとおり、ネストされたリストがあります。計画では、リストアイテムのいずれかが一致する場合、最も高い親<li>を表示し、一致するアイテムを持たない他のすべてのアイテムを非表示にする必要があります。

ユーザーが何も入力しない場合は、すべてのリストアイテムが再び表示されます。

誰かが私を正しい方向に向けるのを手伝ってもらえますか？jQueryの各メソッドを使用して、クエリを含むすべてのアイテムを検索して表示しようとしましたが、代わりにすべてを非表示にします...

4

1 に答える 1

3

contains()テキストではなく要素用の、の使用が気に入らなかった。フィルタを使用するように変更しました。また、子li要素だけでなく、すべての要素を非表示にして、すべてが非表示になるようにしました。

現在は機能していますが、大文字と小文字が区別されることに注意してください...

動作するjsfiddleの例

$('form.groups-search').live('submit', function(e) {
    e.preventDefault();
    query = $('input#q').val();
    if (query === "") {
        $('ul.groups-tree *').show();
    } else {
        $('ul.groups-tree *').hide();
        $('ul.groups-tree li').filter(function () {
            return $(this).text().indexOf(query) != -1;
        }).show().parents().show();
    }
});?
于 2012-11-08T16:59:22.663 に答える