Фильтр jQuery не работает с аккордеоном Bootstrap - PullRequest
Новая
       38

Фильтр jQuery не работает с аккордеоном Bootstrap

0 голосов
/ 23 октября 2018

Я использую аккордеон Bootstrap 3 для отображения некоторой информации.Это прекрасно работает.Однако мой список может быть довольно длинным, поэтому я использую фильтр jQuery, чтобы попытаться отфильтровать результаты.Однако, когда я выполняю поиск по фильтру, это искажает результаты.Например, здесь возвращается не свернутый элемент.

Я бы хотел, чтобы он просто возвращал элементы аккордеона в свернутом состоянии и просто использовал название элемента.

enter image description here

Вот 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>

А вот мой 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)
    });
  });
});

Заранее благодарен за любую помощь.

1 Ответ

0 голосов
/ 23 октября 2018

Попробуйте приведенный ниже фрагмент кода 

$(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>
...