Как я могу добавить кнопку поиска к существующему поисковому коду аккордеона? - PullRequest
Новая
       19

Как я могу добавить кнопку поиска к существующему поисковому коду аккордеона?

1 голос
/ 12 февраля 2020

Я использую код Рика Сибли из первого ответа на этот пост: Поиск в аккордеоне

Рик упоминает, что можно добавить кнопку поиска для запуска скрипта по клику, в дополнение к нажатию Enter, чтобы отправить и запустить скрипт поиска. Может ли кто-нибудь помочь мне добавить функцию поиска по кнопке к этому, пожалуйста?

Большое спасибо!

1 Ответ

0 голосов
/ 12 февраля 2020

Я понял это! Я чувствую себя гением - хотя я, очевидно, очень плох в этом.

Вот что я добавил в дополнение к прослушивателю событий 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>

...