jQueryに別々の値を認識させるにはどうすればいいですか？

Question

簡単な検索/フィルタ機能を作るためのjQueryがあります。この機能は、ユーザーがテキストフィールドに入力することを可能にし、その文字列を持つリストアイテムのみを表示します。つまり、 'red'と入力すると、 'red'を含むすべてのリストアイテムが表示されます。

私の問題は、正確な入力でのみ動作するということです。つまり、「赤い青色」と入力すると、「青い赤色」または他の「赤色」の項目ではなく「赤い青色」を見つけることになります。

誰かが私の問題の解決に役立つでしょうか？

はここに私のコードです：コメントで示唆したように

$('#box').keyup(function() { 
 
    var valThis = $(this).val().toLowerCase(); 
 
    if (valThis == "") { 
 
    $('.filterlist>li').show(); 
 
    } else { 
 
    $('.filterlist>li').each(function() { 
 
     var text = $(this).text().toLowerCase(); 
 
     (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide(); 
 
    }); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="box" type="text" placeholder="Search"> 
 

 
<ul class="filterlist" style="list-style:none;"> 
 
    <li>red</li> 
 
    <li>blue</li> 
 
    <li>red blue</li> 
 
    <li>blue red</li> 
 
</ul>

Answer 1

$('#box').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 

    if (valThis == "") { 
    $('.filterlist>li').show(); 
    } else { 
    var subValues = valThis.trim().split(' '); 

    $('.filterlist>li').each(function() { 
     var node = $(this); 
     var text = node.text().toLowerCase(); 

     if (subValues.some(function (word) { 
     return text.indexOf(word) !== -1; 
     })) { 
     node.show(); 
     } 
     else { 
     node.hide(); 
     } 
    }); 
    }; 
}); 

https://jsfiddle.net/0xjwapdf/

、私たちは別々の単語に検索語を分割して、それぞれの検索しますそれらの言葉。もっとして一つの単語は、我々は、テキストボックス内の各単語をチェックします来た場合のjQueryを更新しました

Answer 2

$('#box').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis == "") { 
    $('.filterlist>li').show(); 
    } else { 
    var test = valThis.split(" "); 
    if(test.length >1) { 
     console.log("More then one word") 
     $('.filterlist>li').each(function() { 
     var text = $(this).text().toLowerCase(); 
      $.each(test, function(index, value) { 
        (text.indexOf(value) >= 0) ? $(this).show(): $(this).hide(); 
      }); 

     }); 
    }else{ 
     $('.filterlist>li').each(function() { 
     var text = $(this).text().toLowerCase(); 
     (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide(); 
     }); 
    } 
    }; 
}) 

。