jQuery Bootstrap Accordian常见问题搜索

问题描述

我正在处理一个相当大的FAQ页面，该页面需要包含多个部分。它需要一种高效的搜索功能，我已经将based on a previous answer放在了一起，但是我只停留在几点上。

搜索功能不起作用-似乎没有选择正确的'panelContainerId'
如何将多个手风琴ID组合到搜索功能中
如何在结果中突出显示搜索词

这是我的工作代码-另请参见此处https://jsfiddle.net/clappertrapp/92vxzes7/71/

jQuery(document).ready(function ($) {
  
// This section makes the search work.
(function() {
  var searchTerm,panelContainerId;
  $('#accordion_search_bar').on('change keyup',function() {
    searchTerm = $(this).val();
    //console.log( $(this).val() );
    $('#accordionname1 > .panel,#accordionname2 > .panel').each(function() { // is this the right way to add multiple sections? 
      panelContainerId = '#' + $(this).attr('id'); // << should be collapse10 or 11 etc,but not getting it
      
      //console.log(  $(this).attr('id')  );
      

      // Makes search to be case insesitive 
      $.extend($.expr[':'],{
        'contains': function(elem,i,match,array) {
          return (elem.textContent || elem.innerText || '').toLowerCase()
            .indexOf((match[3] || "").toLowerCase()) >= 0;
        }
      });

      // END case insesitive

      // Show and Hide Triggers
      $(panelContainerId + ':not(:contains(' + searchTerm + '))').hide(); //Hide the rows that done contain the search query.
      $(panelContainerId + ':contains(' + searchTerm + ')').show().css({"background-color":"red"}); //Show the rows that contain answer - highlight with red!

    });
  });
}());
// End Show and Hide Triggers


// END 
});

//colors
//$grey: #cacaca;

// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after { 
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px; 
    margin:20px;
  }  
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title { 
  a {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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" />
    <input type="button" id="accordion_search" value="Search in FAQs">
  </div>

  <h2 id="one">Section one - What is being amazed?</h2>
  <div class="panel-group" id="accordionname1">
   
   
    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionname1" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Tell me all about being amazed?</h5>
        </a>
      </div>
      <div id="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Doing amazing things is amazing</p>
        </div>
      </div>
    </div>

    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname1" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>
            What's so great about being amazed?</h5>
        </a></div>
      <div id="collapse11" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>You have to trust that it is amazing!</p>
        </div>
      </div>
    </div>

</div>

<h2 id="two">Section two - How to be amazed</h2>
  <div class="panel-group" id="accordionname2">
  
    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname2" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Where do I sign up to become amazed?</h5>
        </a>
      </div>
      <div id="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>You sign up at the Be Amazed sign up page</p>
        </div>
      </div>
    </div>
    
    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname2" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>
            What happens once I am sign up to be amazed?</h5>
        </a></div>
      <div id="collapse11" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Once you've signed up,we'll be in touch to amaze you.</p>
        </div>
      </div>
    </div>

</div>

<h2 id="three">Section three - Refunds</h2>
  <div class="panel-group" id="accordionname3">  
     
    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname3" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>I wasn't amazed - can I get a refund?</h5>
        </a>
      </div>
      <div id="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Well that's too bad,we did try to amaze you,but what we thought was amazing,you didn't. so we will give you an amazing credit.</p>
        </div>
      </div>
    </div>

    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname3" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>
            What can I do with the credit?</h5>
        </a></div>
      <div id="collapse11" class="panel-collapse collapse ">
        <div class="panel-body postclass">

          <p>Well,it's amazing because it's useless of course!</p>
        </div>
      </div>
    </div>


</div>
</div>

解决方法

这里您需要隐藏整个面板，可以使用panel-default类。首先隐藏所有具有该类名称的divs，然后使用:contains检查面板是否具有{{ 1}}是由用户搜索还是不搜索，这取决于将searchTerm仅添加到该特定面板。

然后，使用css来显示重置按钮，以显示键入时隐藏的所有面板，并且在此处将$(".panel-group").find(".panel-default").show()更改为普通颜色或任何其他颜色。

演示代码 ：

background-color

jQuery(document).ready(function($) {

  // This section makes the search work.
  (function() {
    var searchTerm,panelContainerId;
    $('#accordion_search_bar').on('change keyup',function() {
      searchTerm = $(this).val();
      var collapse = $(".panel-group");
      if ($(this).val() != "") {
  //find panel default hide them
        collapse.find(".panel-default").hide(); //hide all li 
//loop through panel group
        $('.panel-group').each(function() {
        //check if matches
          collapse.find('.panel-collapse:contains(' + searchTerm + ')').parent().show().css({
            "background-color": "red"
          });

        });
      } else {
         
        collapse.find(".panel-default").show().css({
          "background-color": ""
        });; //show all and remove red bg 
      }
    });

  }());


  $('#resetbtn').click(function() {
    $('#accordion_search_bar').val("");
    $(".panel-group").find(".panel-default").show().css({
      "background-color": ""
    });//show all remove red bg

  });

});

// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after {
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 20px;
  }
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title./colors //$grey: #cacaca;
// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after {
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 20px;
  }
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title a {
  display: block;
}

accordion bootstrap-accordion full-text-search

jQuery Bootstrap Accordian常见问题搜索

问题描述

解决方法

相关问答