Jquery Bootstrap手风琴常见问题搜索案例

问题描述

正在使用Jquery引导手风琴FAQ搜索工具-遵循this post的一些帮助，我在那里有95％，但需要进行修改才能实现： （1）在任何情况下都进行搜索（似乎忽略了大写字母）； （2）在标题和正文中进行搜索； （3）非常高兴，但不是必须要突出显示搜索词-不仅仅是整个段落。

我已经研究了一段时间，并尝试了多种方法来实现上述目标，但并没有完全理解。此处的脚本显示了控制台中的错误-但在jsfiddle上没有....

下面是我的工作代码-也在这里：https://jsfiddle.net/clappertrapp/kL7jyd3q/

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

  // This section makes the search work.
  (function() {
    var searchTerm,panelContainerId;
    $('#accordion_search_bar').on('change keyup',function() {
      searchTerm = $(this).val().toLowerCase(); //<<<<<< how to ignore case in page?
      var collapse = $(".panel-group");
      if ($(this).val() != "") {
        //find panel default hide them
        collapse.find(".panel-default").hide();
        $(".panel-group .hiddennote").remove();
        $(".panel-group").append('<div class="hiddennote">Hidden - clear search result to unhide</div>');

        //loop through panel group
        $(".panel-group,.panel-heading").each(function() {
          //check if matches
          collapse.find('.panel-collapse:contains(' + searchTerm + ')').parent().show().css({
            "background-color": "red"
          });
          $(".panel-heading").css({
            "background-color": "yellow"
          });
          //console.log('term=' + searchTerm)

        });
      } 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
    $(".panel-group .hiddennote").hide();
    $(".panel-heading").css({
      "background-color": ""
    });

  });

});

// 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<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">
    <input type="button" id="resetbtn" value="Reset">


  </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="#collapse12">
          <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="collapse12" 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="#collapse13">
          <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="collapse13" 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="#collapse14">
          <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="collapse14" 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="#collapse15">
          <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="collapse15" 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）