javascript - Jquery を使用した検索 - 複数の用語の処理

Question

検索可能な FAQ として、この素晴らしいスニペットをオンラインで見つけました。ただし、複数の用語で動作するように変更する方法を誰かが知っているかどうか疑問に思っていました.

http://jsfiddle.net/pT6dB/

上記の例では、「paper Earth」と入力して、両方の例の結果が返されるようにします。今それを入力すると、何も返されません。「紙」または「地球」の検索と同等にしたいのでしょう。

どんな助けでも大歓迎です。

ジェームズ

Answer 1

できることは、検索文字列を正規表現と照合してすべての単語を取得することです。次に、それぞれliのテキストに単語が含まれているかどうかを確認し、適切に表示または非表示にします。array.someただし、新しいブラウザでのみ使用できるものを使用しました。

私も少し整理しました - すべてのコードが必要なわけではありません: http://jsfiddle.net/pT6dB/29/。

// no need for preventDefault here - clicking a <strong> doesn't do anything
$('li strong').click(function(e) {
    $(this).parent().find('em').slideToggle();
});

// the "input" event is available on newer browsers, and is also fired when e.g.
// pasting or dragging text
$('#search').on("input", function(e) {
    // make it case-insensitive, and match against a regexp that matches
    // non-space characters
    var words = $(this).val().toLowerCase().match(/\S+/g);
    if (!words) {  // no match, i.e. no words found
        $('#result li').show();
    } else {
        $('#result li').each(function() {
            var text = $(this).text().toLowerCase();
            var show = words.some(function(word) {
                return ~text.indexOf(word);  // ~ with indexOf means "contains"
            });
            $(this).toggle(show);  // will show or hide depending on "show"
        });
    }
});

Answer 2

javascript の string.split 関数を使用して、値を " " 文字で分割する必要があります。次に、各要素をループして一致するかどうかを確認します。

例えば：

 $('#search').keyup(function(e) {
        var s = $(this).val().trim();
        if (s === '') {
            $('#result LI').show();
            return true;
        }

        $('#result LI').hide();

        splits = s.split(" ");

        for(x in splits){
            $('#result LI:contains(' + splits[x]+ ')').show();
        }

        return true;
    });