如何将搜索按钮添加到现有的手风琴搜索代码中？

Question

我正在使用此 post 的第一个答案中 Rick Sibley 的代码：Search within an accordion

Rick 提到除了按 Enter 键提交和运行搜索脚本之外，还可以将搜索按钮添加到运行脚本 onclick。任何人都可以帮我添加搜索 'button' 功能吗？

非常感谢！

Answer 1

我想通了！我觉得自己像个天才——尽管我显然在这方面做得很差。

这是我在 keyup 事件侦听器之外添加的内容：

//Search Accordings; Highlight & Open Matching Areas ON SEARCH BUTTON CLICK


function searchBtn() {
var input, filter, i, acc, panels, txtValue, searchText, searchTitle;
input = document.getElementById("keywordSearch");
filter = input.value.toUpperCase();
acc = document.getElementsByClassName("accordion");
panels = document.getElementsByClassName("panel");

for (i = 0; i < panels.length; i++) {
  for (i = 0; i < acc.length; i++) {
    searchText = panels[i].textContent || panels[i].innerText;
    searchTitle = acc[i].textContent || acc[i].innerText;
    if (input.value !== "") {
      if (searchText.toUpperCase().indexOf(filter) > -1 || searchTitle.toUpperCase().indexOf(filter) > -1) {
        if (!acc[i].classList.contains("active")) {
          acc[i].classList.add("active");
        }
        highlightIndex.apply(filter);
        panels[i].style.maxHeight = panels[i].scrollHeight + "px";
        panels[i].scrollIntoView({
          behavior: 'smooth'
        });
      } else {
        if (acc[i].classList.contains("active")) {
          acc[i].classList.remove("active");
        }
        panels[i].style.maxHeight = null;
      }
    } else {
      highlightIndex.remove();
      if (acc[i].classList.contains("active")) {
        acc[i].classList.remove("active");
      }
      panels[i].style.maxHeight = null;
    }
  }
}

}

在html中添加了以下按钮

<button type="submit" id="searchBtn" onclick="searchBtn();">Search</button>

如何将搜索按钮添加到现有的手风琴搜索代码中？

How can I add a search button to this existing accordion search code?

search

onclick

accordion