实时搜索手风琴及其内容 [英] Live search for accordions and its content

问题描述

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

I have a list of accordions in my html page and i would like to have a search box for filtering the accordions and its contents. Basically i would like to create a search box for all the accordions but i also want to search for the contents inside the accordions. Sorry if my question is not clear but this is my first question on Stackoverflow.

下面的代码用于说明我如何创建手风琴以及用户按下一个标题时如何显示它们.(我在html中创建了一个手风琴，并且每当我想在javascript文件中创建更多手风琴时就将其克隆.)

Below the code is for how i am creating the accordions and how i show them when the user press one title. (i have created one accordion in the html and i clone it whenever i want to create more in the javascript file.)

//这是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

// this is the other js for the search

$(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();
   });
   });
   });

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

Basically i want to the search box to search through the buttons of all accordions and also search in every panel that i created for each accordion.

推荐答案

使用HTML属性 innerText ，我们可以提取每个手风琴的文本内容，并检查其中是否包含您要搜索的文本.如果确实包含文本，则显示手风琴，否则将其隐藏.MDN在 innerText上有一篇很棒的文章.他们说，

Using the HTML property innerText we can extract the text content of each accordion and check whether it contains the text for which you are searching. If it does contain the text then we show the accordion, otherwise we hide it. MDN has a great article on innerText. They state,

它近似于用户使用光标突出显示元素的内容然后将其复制到剪贴板时得到的文本

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

您可以通过以下方式在搜索手风琴时使用 innerText :(您的手风琴脚本使用香草JavaScript，而搜索使用JQuery.为了确保兼容性，我将在下面使用普通的JavaScript.)

You might use innerText when searching your accordions in the following way: (your accordion script uses vanilla JavaScript whereas your search is using JQuery. I'll use plain JavaScript below to ensure compatibility.)

获取手风琴列表:

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

假设您的搜索位于名为 searchText 的变量中，遍历每个手风琴并查看其文本内容:

Assuming your search is in a variable called searchText, loop through each accordion and look at its text content:

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

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

I converted both the search and accordion text content to lowercase for case insensitivity.

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

A complete example that shows an input event listener added to the search bar might look like the following:

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 将搜索手风琴的所有文本内容，包括按钮文本.如果您只想搜索面板文本，则获取该元素并在其上使用 innerText .

Note that using innerText will search all text content of the accordion, including the button text. If you just want to search the panel text then get that element and use innerText on that.

这篇关于实时搜索手风琴及其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！