干净搜索后如何隐藏项目？

Question

我建立了一个常见问题解答页面并使用 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;
}

Answer 1

只需更改下面的 if

if (txtValue.toUpperCase().indexOf(filter) > -1) {

至

  if (filter && txtValue.toUpperCase().indexOf(filter) > -1) {

它会起作用

干净搜索后如何隐藏项目？

How to keep items hidden after clean search?

javascript

haml