【发布时间】：2020-07-08 20:50:22
【问题描述】：
我构建了一个常见问题页面并使用 JavaScript 实现了搜索功能。 所有项目列表最初都是隐藏的，当我在搜索栏中键入关键字时，结果会显示。 但是，在搜索栏中清空关键字后，我遇到了问题。
在我输入内容然后清空后，所有项目的列表仍然可见，但是，我想将它们隐藏起来。
我的 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.
faq.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";
}
}
}
faq.scss
.hidden {
display: none;
}
【问题讨论】：
-
我的建议是不要隐藏搜索背后的所有有用信息。用它来过滤。
-
这将是一种可能的方式。但是，我想保持这种方式，因为问答下面还有其他内容。我希望访问者能够在第一眼看到他们。如果我不隐藏那长长的问题列表（大约 50 个），访问者将不得不向下滚动一段时间才能看到其他内容。
标签： javascript haml