FAQ accordion search

问题

I have a page for FAQ. Now I wanted a search functionality within that page. I have successfully implemented the search functionality but I am unable to open the particular question related to the search text. Any help would be greatly appreciated!!!

Below is my script:

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

回答1:

Hey why don't you use bootstrap search accordion like the below reference.

(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

来源：https://stackoverflow.com/questions/59280746/faq-accordion-search