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

debugcn 发表于 Dev

线

我正在使用Rick Sibley的代码，它来自该帖子的第一个答案：在手风琴中搜索

Rick提到，除了按Enter提交并运行搜索脚本之外，还可以添加搜索按钮来运行onclick脚本。请问有人可以帮我添加搜索“按钮”功能吗？

非常感谢！

线

我想到了！我觉得自己很天才-尽管我显然对此很不好。

这是除了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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。