Javascript 手风琴及其内容的实时搜索

我有一个在我的html页面手风琴列表，我想有一个搜索框过滤手风琴及其内容。基本上，我想为所有的手风琴创建一个搜索框，但我也想搜索手风琴内的内容。对不起，如果我的问题不清楚，但这是我关于Stackoverflow的第一个问题

下面的代码是关于我如何创建手风琴以及当用户按下一个标题时我如何显示它们。（我已经在html中创建了一个手风琴，只要我想在javascript文件中创建更多，我就会克隆它。）

//这是在html中

<input type="search" id="accordion_search_bar" placeholder="Search"/>

<div id="accordions">
  <div id="accID1" class="AccordionContainer">
    <button id="accID" class="accordion"></button>
  <div class="panel" id="panel1">  
</div>

---

基本上，我想通过搜索框搜索所有手风琴的按钮，并在我为每个手风琴创建的每个面板中进行搜索。

使用HTML属性

innerText

我们可以提取每个手风琴的文本内容，并检查它是否包含您正在搜索的文本。如果它确实包含文本，那么我们将显示手风琴，否则我们将隐藏它。MDN已打开

innerText

。他们说,

如果用户用光标突出显示元素的内容，然后将其复制到剪贴板，则该文本近似于用户将获得的文本

您可以通过以下方式使用

innerText

搜索手风琴：（您的手风琴脚本使用香草JavaScript，而您的搜索使用JQuery。我将在下面使用纯JavaScript以确保兼容性。）

获取手风琴列表：

accordions = document.querySelectorAll( '.AccordionContainer' );

假设您的搜索是在一个名为

searchText

的变量中进行的，则循环遍历每个手风琴并查看其文本内容：

Array.prototype.forEach.call( accordions, function( accordion ) {
    if ( accordion.innerText.toLowerCase().indexOf( searchText ) >= 0 ) {
        // If the index of searchText is -1 then it is not in the accordion.
        // Otherwise it is, so we display the accordion
        accordion.style.display = 'block';
    }
    else {
        // We hide the accordion if searchText is not found
        accordion.style.display = 'none';
    }
} );

为了不区分大小写，我将搜索和手风琴文本内容都转换为小写

显示添加到搜索栏的输入事件侦听器的完整示例可能如下所示：

var search=document.getElementById（'accordion\u search\u bar'），
accordions=document.queryselectoral（'.accordioncainer'）；
//单击显示内容
Array.prototype.forEach.call（accordions，函数（accordion））{
accordion.querySelector（'button'）.addEventListener（'click'，function（））{
this.nextElementSibling.classList.add（'active'）；
} );
} );
//应用搜索
search.addEventListener（'input'，function（））{
var searchText=search.value.toLowerCase（）；
Array.prototype.forEach.call（accordions，函数（accordion））{
if（accordion.innerText.toLowerCase（）.indexOf（searchText）>=0）{
accordion.style.display='block'；
}
否则{
accordion.style.display='none'；
}
} );
} );
.panel{
最大高度：0；
溢出：隐藏；
过渡：最大高度0.3s；
}
.panel.active{
最大高度：300px；
}

显示内容
这是手风琴文本
显示内容
这是另一批手风琴文本
您能否提供一些包含内容和搜索框的HTML，以便我们更好地了解您想要实现的目标？此外，这里使用的不是jQuery，我编辑并放置搜索框和搜索时使用的jQuery代码。我的问题是，当我在搜索框中键入内容时，代码没有按预期工作。没有发生任何事情。非常感谢。它的工作方式与我预期的一样！
accordions = document.querySelectorAll( '.AccordionContainer' );

Array.prototype.forEach.call( accordions, function( accordion ) {
    if ( accordion.innerText.toLowerCase().indexOf( searchText ) >= 0 ) {
        // If the index of searchText is -1 then it is not in the accordion.
        // Otherwise it is, so we display the accordion
        accordion.style.display = 'block';
    }
    else {
        // We hide the accordion if searchText is not found
        accordion.style.display = 'none';
    }
} );