jquery - jqueryには、子要素のテキストを検索し、すべての子要素を検索キーでフィルタリングできる関数はありますか?

Question

たとえば、私のhtmlは次のようになります。

<div id="mainDiv">
   <div id="1">This is animal page</div>
   <div id="2">No animal here</div>
   <div id="3">Jame Bond</div>
   <div id="4">Simple Bond</div>
</div>

そして、私はinputこのようなフィールドを持っています

<input type="text" id="search">

何かを検索している間、結果を他のdivにリストする必要があります。

検索すると、keyword bond次のように表示されます

<div id="mainDiv">
   <div id="3">Jame Bond</div>
   <div id="4">Simple Bond</div>
</div>

Answer 1

.filter()簡単なフィルタリング関数を使用して作成できます。

var search_string = 'bond';
var $matched = $('#mainDiv > div').filter(function() {
    return $(this).text().toLowerCase().indexOf(search_string) !== -1;
});

Answer 2

Blenderの答えでもう少し、これを試してください

<input type="text" id="search" onkeyup="search(this.value);">
  <div id="mainDiv">
     <div id="1">This is animal page</div>
     <div id="2">No animal here</div>
     <div id="3">Jame Bond</div>
     <div id="4">Simple Bond</div>
  </div>

<script type="text/javascript">
    function search(text) {
       var search_string = text;
       var all = $('#mainDiv > div');

       all.css({ "display": "none" });

       var $matched = $('#mainDiv > div').filter(function () {
          return $(this).text().toLowerCase().indexOf(search_string) !== -1;
       });

       $matched.css({ "display": "block" });
     }
</script>

デモリンク: http://jsbin.com/ocugug/1

Answer 3

これを試して

     $("#mainDiv div").hide();
     $("#mainDiv div:contains("+$("#search").val()+")").show(); 

デモ