面板中的搜索筛选器

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