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

在面板中搜索过滤器

1 个答案: