Я создал страницу часто задаваемых вопросов и реализовал функцию поиска, используя JavaScript. Весь список элементов изначально скрыт, и когда я набираю ключевое слово в строке поиска, отображается результат. Но у меня возникла проблема после того, как вы пустили ключевое слово в строку поиска.
После того, как я что-то наберу, а затем пуст, список всех элементов останется видимым, однако я хочу, чтобы они были скрыты.
введите описание изображения здесь
My index. html .haml (это длинный список, поэтому я показываю некоторые для справки)
%input#myInput{:onkeyup => "findFAQ()", :placeholder => "Search for questions", :title => "Type keywords", :type => "text"}
%ul#faqall
%li
%button.hidden.faq-toggle-list Where can I apply?
.highlight
%div.hidden
apply in person at your local office. We are looking forward to hearing from you!
%li
%button.hidden.faq-toggle-list When can I expect to hear back from you?
.highlight
%div.hidden
we will contact you for an interview
%li
%button.hidden.faq-toggle-list Do you have any jobs available?
.highlight
%div.hidden
Yes! Please visit us at
%li
%button.hidden.faq-toggle-list Do I sign up online or come to the office?
.highlight
%div.hidden
Yes! Please visit us
%li
%button.hidden.faq-toggle-list I want to work in a specific industry only, can you help me?
.highlight
%div.hidden
We work across all industries and all verticals.
часто задаваемые вопросы js
function findFAQ() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("faqall");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("button")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
}
часто задаваемые вопросы css
.hidden {
display: none;
}