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