Question

我正在使用Bootstrap 3的手风琴来显示一些信息。效果很好。但是，我的列表可能很长，因此我正在使用jQuery过滤器尝试过滤结果。但是，当我执行过滤器搜索时，它会使结果失真。例如，这里返回的是未折叠的项目。

我希望它仅以折叠状态返回手风琴元素，并使用该项目的标题。

这是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)
    });
  });
});

在此先感谢您的帮助。

Answer 1

尝试下面的代码段

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

jQuery过滤器不适用于Bootstrap手风琴

1 个答案: