如何解决jQuery Bootstrap Accordian常见问题搜索
我正在处理一个相当大的FAQ页面,该页面需要包含多个部分。它需要一种高效的搜索功能,我已经将based on a previous answer放在了一起,但是我只停留在几点上。
这是我的工作代码-另请参见此处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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。