FAQ 手风琴搜索

Question

我有一个常见问题解答页面。现在我想要该页面中的搜索功能。我已成功实现搜索功能，但无法打开与搜索文本相关的特定问题。任何帮助将不胜感激！！！

下面是我的脚本：

$(document).ready(function() {
  $("#searchfaq").on("keypress click input paste", function() {
    var val = $(this).val();

    if (val.length) {
      $("#faq_new .card .accordion").hide().filter(function() {
        return $('.bloc_question .card-title', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1 || $('.bloc_question .card-body', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
      }).show();
    } else {
      $(this).next().slideToggle(600);
      $(".accordion-content").not($(this).next()).slideUp(600);
      $(".accordion-toggle").not($(this)).css('color', '#000000');
      $('.accordion-arrow').not($(this).find('.accordion-arrow')).rotate(0);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchfaq" type="text" class="form-control" placeholder="Search FAQ">

<div class="bloc_question accordion-content" style="margin-bottom: 40px;">
  <h3 id="A8" class="card-title" style="display: none;">Lorem Ipsum is simply dummy text</h3>
  <a href="#top" class="btn_top" style="display: none;">top</a>
  <br style="clear:both"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
  type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
  recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

Answer 1

嘿，你为什么不使用引导搜索手风琴，如下面的参考。

(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();
    });
  });
}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" 
     id="page_container">
  <div id="accordion_search_bar_container">
      <input type="search" 
         id="accordion_search_bar" 
         placeholder="Search"/>
  </div>
  <div class="panel-group" 
       id="accordion" 
       role="tablist" 
       aria-multiselectable="true">
    <div class="panel panel-success" 
         id="collapseOne_container">
      <div class="panel-heading" 
           role="tab" 
           id="headingOne">
        <h4 class="panel-title">
          <a role="button" 
             data-toggle="collapse" 
             data-parent="#accordion" 
             href="#collapseOne" 
             aria-expanded="true" 
             aria-controls="collapseOne">
            One
          </a>
        </h4>
      </div>
      <div id="collapseOne" 
           class="panel-collapse collapse in" 
           role="tabpanel" 
           aria-labelledby="headingOne">
        <div class="panel-body">
          <p>Pellentesque convallis dolor</p>
          <p>Enim at tincidunt magna dapibus vitae</p>
        </div>
      </div>
    </div>
    <div class="panel panel-primary" 
         id="collapseTwo_Container">
      <div class="panel-heading" 
           role="tab" 
           id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" 
             role="button" 
             data-toggle="collapse" 
             data-parent="#accordion" 
             href="#collapseTwo" 
             aria-expanded="false" 
             aria-controls="collapseTwo">
            Two
          </a>
        </h4>
      </div>
      <div id="collapseTwo" 
           class="panel-collapse collapse in" 
           role="tabpanel" 
           aria-labelledby="headingTwo">
        <div class="panel-body">
          <p>Vestibulum in laoreet nisi</p>
          <p>Sit amet placerat massa</p>
        </div>
      </div>
    </div>
    <div class="panel panel-danger" 
         id="collapseThree_Container">
      <div class="panel-heading" 
           role="tab" 
           id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" 
             role="button" 
             data-toggle="collapse" 
             data-parent="#accordion" 
             href="#collapseThree" 
             aria-expanded="false" 
             aria-controls="collapseThree">
            Three
          </a>
        </h4>
      </div>
      <div id="collapseThree" 
           class="panel-collapse collapse in" 
           role="tabpanel" 
           aria-labelledby="headingThree">
        <div class="panel-body">
          <p>Curabitur sem eros tempor sit</p>
          <p>Amet nunc eget, gravida mollis</p>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/georgeroubie/pen/dpryjp