常见问题手风琴搜索 [英] 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!!!

下面是我的脚本:

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

推荐答案

嘿，为什么不像下面的参考文献那样使用引导搜索手风琴.

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

这篇关于常见问题手风琴搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！