仅在搜索手风琴时在同一面板组中有匹配时显示面板

时间：2017-07-21 09:04:49

标签： javascript search accordion panels

我正在构建一个可以通过在键盘更改时显示命中的手风琴。到目前为止，这项工作非常顺利，除了我使用面板显示类别，并且我不希望面板在同一段中仍有点击时消失。

这是迄今为止我在JS中得到的代码，感谢codepen：

＆＃13;
＆＃13; 
(function(){
  var searchTerm, panelContainerId;
  // Create a new contains that is case insensitive
  $.expr[':'].containsCaseInsensitive = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#accordion_search_bar').on('change keyup paste click', function () {
    searchTerm = $(this).val();
    $('#accordion > .panel').each(function () {
      panelContainerId = '#' + $(this).attr('id');
      $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
      $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show(); 
    });
  });
}());
＆＃13; 
#accordion_search_bar_container {
  position: relative;
}

#accordion_search_bar_container:after {
  content: '\e003';
  font-family: 'Glyphicons Halflings';
  width: 18px;
  height: 18px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
#accordion_search_bar_container #accordion_search_bar {
  display: block;
  margin: 10px auto;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #cacaca;
  border-radius: 25px;
  outline: 0;
}

.panel-title a {
  display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section50" class="container-fluid">
  <div class="container-fluid">
    <div id="accordion_search_bar_container">
      <input id="accordion_search_bar" placeholder="Zoeken..." type="search"> </div>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-info" id="collapse1_container">
        <div class="panel-body" style="text-align: center;" id="category"> <b>**Category**</b></div>
        <div class="panel-heading" role="tab" id="heading1">
          <h4 class="panel-title"> <a role="button" data-toggle="collapse"

                  data-parent="#accordion" href="#collapse1" aria-expanded="true"

                  aria-controls="collapse1">Question</a> </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
          <div class="panel-body">
            <p>Answer1</p>
          </div>
        </div>
      </div>
      <div class="panel panel-info" id="collapse2_Container">
        <div class="panel-heading" role="tab" id="heading2">
          <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"

                  data-parent="#accordion" href="#collapse2" aria-expanded="false"

                  aria-controls="collapse2">Question</a> </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
          <div class="panel-body">
            <p>Answer2</p>
          </div>
        </div>
      </div>
      <div class="panel panel-info" id="collapse3_Container">
        <div class="panel-heading" role="tab" id="heading3">
          <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"

                  data-parent="#accordion" href="#collapse3" aria-expanded="false"

                  aria-controls="collapse3">Question</a> </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
          <div class="panel-body">
            <p>Answer3</p>
          </div>
        </div>
      </div>
      <div class="panel panel-info" id="collapse4_Container">
        <div class="panel-heading" role="tab" id="heading4">
          <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"

                  data-parent="#accordion" href="#collapse4" aria-expanded="false"

                  aria-controls="collapse4">Question</a> </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
          <div class="panel-body">
            <p>Answer4</p>
          </div>
        </div>
      </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

简而言之：我如何制作面板（id="category"），我将其放入＆＃39;类别＆＃39;只要在相同的部分中有击中，它就不会消失吗？我似乎无法让它发挥作用。

提前致谢！

1 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
(function() {
  var searchTerm, panelContainerId;
  // Create a new contains that is case insensitive
  $.expr[':'].containsCaseInsensitive = function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#accordion_search_bar').on('change keyup paste click', function() {
    searchTerm = $(this).val();
    var totalShown = 0;
    $('#accordion > .panel').each(function() {
      panelContainerId = '#' + $(this).attr('id');

      $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
      $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
      if ($(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').length) {
        totalShown++;
      }
    });

    if (!totalShown) {
      $('#category').hide();
    } else {
      $('#category').show();
    }

  });
}());
＆＃13; 
#accordion_search_bar_container {
  position: relative;
}

#accordion_search_bar_container:after {
  content: '\e003';
  font-family: 'Glyphicons Halflings';
  width: 18px;
  height: 18px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

#accordion_search_bar_container #accordion_search_bar {
  display: block;
  margin: 10px auto;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #cacaca;
  border-radius: 25px;
  outline: 0;
}

.panel-title a {
  display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section50" class="container-fluid">
  <div class="container-fluid">
    <div id="accordion_search_bar_container">
      <input id="accordion_search_bar" placeholder="Zoeken..." type="search"> </div>
    <div style="text-align: center;" id="category"> <b>**Category**</b></div>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-info" id="collapse1_container">
        <div class="panel-body"></div>
        <div class="panel-heading" role="tab" id="heading1">
          <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">Question</a> </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
          <div class="panel-body">
            <p>Answer1</p>
          </div>
        </div>
      </div>
      <div class="panel panel-info" id="collapse2_Container">
        <div class="panel-heading" role="tab" id="heading2">
          <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">Question</a> </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
          <div class="panel-body">
            <p>Answer2</p>
          </div>
        </div>
      </div>
      <div class="panel panel-info" id="collapse3_Container">
        <div class="panel-heading" role="tab" id="heading3">
          <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">Question</a> </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
          <div class="panel-body">
            <p>Answer3</p>
          </div>
        </div>
      </div>
      <div class="panel panel-info" id="collapse4_Container">
        <div class="panel-heading" role="tab" id="heading4">
          <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">Question</a> </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
          <div class="panel-body">
            <p>Answer4</p>
          </div>
        </div>
      </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题