在面板中搜索过滤器

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>

Select 键上的元素。

(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

在面板中搜索过滤器

Search Filter in Panel

javascript

panel

twitter-bootstrap