パネル内の検索フィルター

Question

私は、ブランドのリストを含むパネルを持っています。このリストは1000項目まで可能です。私は検索フィールドにテキストを入力することによって、リストを検索するユーザーの能力を与えたい。

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h5 class="search-filter-title">House</h5> 
     <span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span> 
    </div> 
    <input type="text" class="form-control" placeholder="#"> 
    <div class="search-body"><div class="checkbox"> 
    <label> 
     <input type="checkbox" value="58ca8cc0d2b0c92660c2fc81"> 
     <span class="search-filter-text">Calvin Klein</span> 

    </label> 

</div></div> 
    <div class="search-body"><div class="checkbox"> 
    <label> 
     <input type="checkbox" value="58ca8c89d2b0c92660c2fc7e"> 
     <span class="search-filter-text">Giorgio Armani</span> 

    </label> 

</div></div> 
    <div class="search-body"><div class="checkbox"> 
    <label> 
     <input type="checkbox" value="58ca8cdbd2b0c92660c2fc82"> 
     <span class="search-filter-text">Tom Ford</span> 

    </label> 

</div></div> 
    <div class="search-body"><div class="checkbox"> 
    <label> 
     <input type="checkbox" value="58ca8cadd2b0c92660c2fc80"> 
     <span class="search-filter-text">Gucci</span> 

    </label> 

</div></div> 
    <div class="search-body"><div class="checkbox"> 
    <label> 
     <input type="checkbox" value="58ca8d1bd2b0c92660c2fc85"> 
     <span class="search-filter-text">Creed</span> 

    </label> 

</div></div> 
</div> 

は、誰が私は、Javaスクリプトを使用してこれを実現する方法を教えてくださいでした：下のパネルのためのコードスニペットです。検索フィールドにユーザタイプのテキストとしてフィルタリングするリストが必要です。

ありがとうございました

Answer 1

検索入力にIDを追加してください。

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h5 class="search-filter-title">House</h5> 
     <span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span> 
    </div> 
    <input type="text" class="form-control" id="search" placeholder="#"> 
    <div class="search-body"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" value="58ca8cc0d2b0c92660c2fc81"> 
       <span class="search-filter-text">Calvin Klein</span> 
      </label> 
     </div> 
    </div> 
    <div class="search-body"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" value="58ca8c89d2b0c92660c2fc7e"> 
       <span class="search-filter-text">Giorgio Armani</span> 
      </label> 
     </div> 
    </div> 
    <div class="search-body"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" value="58ca8cdbd2b0c92660c2fc82"> 
       <span class="search-filter-text">Tom Ford</span> 
      </label> 
     </div> 
    </div> 
    <div class="search-body"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" value="58ca8cadd2b0c92660c2fc80"> 
       <span class="search-filter-text">Gucci</span> 
      </label> 
     </div> 
    </div> 
    <div class="search-body"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" value="58ca8d1bd2b0c92660c2fc85"> 
       <span class="search-filter-text">Creed</span> 
      </label> 
     </div> 
    </div> 
</div> 

キーアップ時に要素を選択します。

(function($) { 

    $(document).ready(function() { 
    $('input#search').on('keyup', function() { 
     var search = $(this).val(); 

     if(!search) { 
     $('.search-body').show(); 
     return; 
     } 

     $('.search-body').hide(); 
     $(".search-filter-text:contains('" + search + "')").parents('.search-body').show(); 
    }); 
    }); 
})(jQuery); 

jsfiddle