Search Filter in Panel

Question

I have a panel, that contain list of brands. This list can be up 1000 items. I want to give user ability to search the list by typing text in search field. Below is the code snippet for panel:

<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>

Could anybody please let me know how to achieve this using Java scripts. I want list to filter as user type text in the search field.

Thanks

Answer 1

Add an id to the search input.

<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 the elements on key up.

(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