Jquery Bootstrap 手风琴常见问题解答 [英] Jquery Bootstrap Accordian FAQ Search

问题描述

我正在处理一个相当大的常见问题解答页面，该页面需要包含多个部分.它需要一个高效的搜索功能，我已经把一个基于以前的答案，但我'我坚持几点.

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

这是我的工作代码 - 也见下文 https://jsfiddle.net/clappertrapp/92vxzes7/71/

jQuery(document).ready(function ($) {//此部分使搜索工作.(功能() {var searchTerm, panelContainerId;$('#accordion_search_bar').on('change keyup', function() {searchTerm = $(this).val();//console.log( $(this).val() );$('#accordionname1 > .panel, #accordionname2 > .panel').each(function() {//这是添加多个部分的正确方法吗?panelContainerId = '#' + $(this).attr('id');//<<应该是 collapse10 或 11 等，但没有得到它//console.log( $(this).attr('id') );//使搜索不区分大小写$.extend($.expr[':'], {'包含':函数(元素，我，匹配，数组){返回 (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;}});//END 不区分大小写//显示和隐藏触发器$(panelContainerId + ':not(:contains(' + searchTerm + '))').hide();//隐藏包含搜索查询的行.$(panelContainerId + ':contains(' + searchTerm + ')').show().css({"background-color":"red"});//显示包含答案的行 - 用红色突出显示！});});}());//结束显示和隐藏触发器//结尾});

//colors//$grey: #cacaca;//主要的#page_container {边距顶部:15px；底边距:15px；}//搜索输入#accordion_search_bar_container {位置:相对；&:在{之后内容:'\e003';font-family: Glyphicons Halflings;宽度:18px；高度:18px；位置:绝对；右:10px；底部:10px；边距:20px；}#accordion_search_bar {显示:块；边距:20px 自动；宽度:100%；填充:27px 10px；边框:1px 实心 $grey;边框半径:25px；大纲:0；}}//使所有行都可点击.面板标题{一种 {显示:块；}}

<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="搜索"/><input type="button" id="accordion_search" value="在常见问题中搜索">

<h2 id="one">第一部分 - 什么令人惊讶?</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>告诉我所有关于惊讶的事情?</h5></a>

<div id="collapse10" class="panel-collapse 折叠"><div class="panel-body postclass"><p>做令人惊奇的事情是令人惊奇的</p>

<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>惊讶有什么了不起?</h5></a></div><div id="collapse11" class="panel-collapse 折叠"><div class="panel-body postclass"><p>你必须相信它是惊人的！</p>