javascript - 实时搜索 Accordion 及其内容

Question

我的 html 页面中有一个 Accordion 列表，我想要一个搜索框来过滤 Accordion 及其内容。基本上我想为所有 Accordion 创建一个搜索框，但我也想搜索 Accordion 内的内容。抱歉，如果我的问题不清楚，但这是我在 Stackoverflow 上的第一个问题。

下面的代码说明了我如何创建 Accordion 以及当用户按下一个标题时我如何显示它们。 (我在 html 中创建了一个 Accordion ，每当我想在 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>

//这是js文件

for (a = 0; a < acc.length; a++) {
  acc[a].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

//这是搜索的另一个js

$(function() {
   var searchTerm, panelContainerId;
   // Create a new contains that is case insensitive
   $.expr[":"].containsCaseInsensitive = function(n, i, m) {
   return (
  jQuery(n)
    .text()
    .toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0
    );
    };

   $("#accordion_search_bar").on("change keyup paste click", function()     {
   searchTerm = $(this).val();
   $("#accordions > .AccordionContainer").each(function() {
    panelContainerId = "#" + $(this).attr("id");
   $(
    panelContainerId + ":not(:containsCaseInsensitive(" + searchTerm +       "))"
   ).hide();
   $(
    panelContainerId + ":containsCaseInsensitive(" + searchTerm + ")"
   ).show();
   });
   });
   });

基本上我想在搜索框中搜索所有 Accordion 的按钮，并在我为每个 Accordion 创建的每个面板中搜索。

Answer 1

使用 HTML 属性 innerText 我们可以提取每个 Accordion 的文本内容并检查它是否包含您要搜索的文本。如果它确实包含文本，那么我们显示 Accordion ，否则我们隐藏它。 MDN 有 a great article在 innerText 上。他们说，

It approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard

在按以下方式搜索 Accordion 时，您可能会使用 innerText:(您的 Accordion 脚本使用原始 JavaScript，而您的搜索使用 JQuery。我将在下面使用纯 JavaScript 以确保兼容性。)

获取 Accordion 列表:

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

假设您的搜索是在一个名为 searchText 的变量中，遍历每个 Accordion 并查看其文本内容:

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';
    }
} );

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

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

var search = document.getElementById( 'accordion_search_bar' ),
    accordions = document.querySelectorAll( '.AccordionContainer' );

// Show content on click
Array.prototype.forEach.call( accordions, function( accordion ) {
    accordion.querySelector( 'button' ).addEventListener( 'click', function() {
        this.nextElementSibling.classList.add( 'active' );
    } );
} );

// Apply search
search.addEventListener( 'input', function() {
    var searchText = search.value.toLowerCase();
    Array.prototype.forEach.call( accordions, function( accordion ) {
        if ( accordion.innerText.toLowerCase().indexOf( searchText ) >= 0 ) {
            accordion.style.display = 'block';
        }
        else {
            accordion.style.display = 'none';
        }
    } );
} );

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}
.panel.active {
    max-height: 300px;
}

<input type="text" id="accordion_search_bar">
<div id="accordions">
  <div class="AccordionContainer">
    <button class="accordion">Show Content</button>
    <div class="panel" id="panel1"> This is accordion text</div>
  </div>
    <div class="AccordionContainer">
    <button class="accordion">Show Content</button>
    <div class="panel" id="panel1"> This is another lot of accordion text</div>
  </div>
</div>

请注意，使用 innerText 将搜索 Accordion 的所有文本内容，包括按钮文本。如果您只想搜索面板文本，则获取该元素并在其上使用 innerText。