Search code examples
jquerytwitter-bootstrap-3bootstrap-accordion

jQuery filter not working with Bootstrap accordion

I'm using Bootstrap 3's accordion to display some information. It works great. However, my list can be pretty long so I'm using jQuery filter to try and filter the results. However, when I perform a filter search it's distorting the results. For example here it's returning the an un-collapsed item.

I'd like it to just return the accordion elements in their collapsed state and just use the item's title.

enter image description here

Here is the HTML:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#BRSEASMB">
          <span class="glyphicon glyphicon-bed"> Test 1 <span class="badge">1</span>
        </a>
      </h4>
    </div>
    <div id="BRSEASMB" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="list-group">
          <div type="button" class="list-group-item">
            1 foo lorem<br>
            foo<br>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#KCSEA100">
          <span class="glyphicon glyphicon-bed"> Test 2 <span class="badge">1</span>
        </a>
      </h4>
    </div>
    <div id="KCSEA100" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="list-group">
          <div type="button" class="list-group-item">
            2 foo<br>
            foo<br>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#KCSEAHMS">
          <span class="glyphicon glyphicon-bed"> Test 3 <span class="badge">1</span>
        </a>
      </h4>
    </div>
    <div id="KCSEAHMS" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="list-group">
          <div type="button" class="list-group-item">
            1 foo<br>
            foo<br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is my JS:

$(document).ready(function(){
  $("#search-filter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".panel-group *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Thanks in advance for any help.

Solution

  • try below code snippet

    $(document).ready(function(){
  $("#search-filter").on("keyup", function() {
    
     var unicode = event.charCode ? event.charCode : event.keyCode;
        if (unicode == 27) { $(this).val(""); }
        var searchKey = $(this).val().toLowerCase();
        $('.accordion-toggle').each(function() {
            var cellText = $(this).text().toLowerCase();
            var accordion = $('#accordion panel');           
    
            if (cellText.indexOf(searchKey) >= 0) {
                $(this).parent().parent().show();
            } else {
                $(this).parent().parent().hide();
                 $('.panel-collapse.in').collapse('hide');
            }
        });
        
  });
});
    <html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
   
</head>
<body>

<br/>
<div class="row-fluid text-left">
    <span class="clearable">
        <input type="text" id="search-filter" placeholder="Type to Search" />
        <span class="icon_clear">x</span>
    </span>
</div>
<br/>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#BRSEASMB">
        <span class="glyphicon glyphicon-bed"> Test 1 <span class="badge">1</span></span>
        </a>
      </h4>
    </div>
    <div id="BRSEASMB" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="list-group">
          <div type="button" class="list-group-item">
            1 foo lorem<br>
            foo<br>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#KCSEA100">
          <span class="glyphicon glyphicon-bed"> Test 2 <span class="badge">1</span>
        </a>
      </h4>
    </div>
    <div id="KCSEA100" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="list-group">
          <div type="button" class="list-group-item">
            2 foo<br>
            foo<br>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#KCSEAHMS">
        <span class="glyphicon glyphicon-bed"> Test 3 <span class="badge">1</span></span>
        </a>
      </h4>
    </div>
    <div id="KCSEAHMS" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="list-group">
          <div type="button" class="list-group-item">
            1 foo<br>
            foo<br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


</body>
</html>