在输入文本之前如何隐藏搜索结果？

Question

基本上，这段代码可以让所有结果在您搜索特定内容时显示并缩减。我想在开始写作之前隐藏所有结果，当我输入至少一个字母时结果再次出现。我已经在那个确切的问题上停留了几个小时，但一无所获。

非常感谢您的帮助。

function Function() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('Input');
  filter = input.value.toUpperCase();
  ul = document.getElementById("UL");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

#Input {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  justify-content: center;
  height: 20px;
}

@media screen and (max-width: 600px) {
  #Input {
    width: 80%;
    margin-top: 4px;
  }
}

;
#UL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#UL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  width: 30%;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
}

#UL li a:hover:not(.header) {
  background-color: #eee;
}

<input type="text" id="Input" onkeyup="Function()" placeholder="Search...">

<ul id="UL" style="list-style: none;">
  <li class="listClass"><a href="Products/a6000.html">SONY a6000</a></li>
  <li class="listClass"><a href="Products/a6400.html">SONY a6400</a></li>

  <li class="listClass"><a href="Products/a7 IV.html">SONY a7 IV</a></li>
  <li class="listClass"><a href="Products/EOS RP.html">Canon EOS RP</a></li>

  <li class="listClass"><a href="Products/D3500.html">Nikon D3500</a></li>
  <li class="listClass"><a href="Products/X1D II 50C.html">Hasselblad X1D II 50C</a></li>
</ul>

Answer 1

如果我没理解错的话，一开始所有的结果都会显示出来？然后，当您开始输入时，它们将被隐藏（未输入任何字母），并且在输入至少一个元素后，它们会再次开始显示吗？在这种情况下，您可以将 onfocus 事件与 onkeyup 事件一起使用。

function Function() {
 
  let input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('Input');
  filter = input.value.toUpperCase();
  ul = document.getElementById("UL");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1 && filter!=='') {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

#Input {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  justify-content: center;
  height: 20px;
}

@media screen and (max-width: 600px) {
  #Input {
    width: 80%;
    margin-top: 4px;
  }
}

;
#UL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#UL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  width: 30%;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
}

#UL li a:hover:not(.header) {
  background-color: #eee;
}

<input type="text" id="Input" onkeyup="Function()" onfocus="Function()" placeholder="Search...">

<ul id="UL" style="list-style: none;">
  <li class="listClass"><a href="Products/a6000.html">SONY a6000</a></li>
  <li class="listClass"><a href="Products/a6400.html">SONY a6400</a></li>

  <li class="listClass"><a href="Products/a7 IV.html">SONY a7 IV</a></li>
  <li class="listClass"><a href="Products/EOS RP.html">Canon EOS RP</a></li>

  <li class="listClass"><a href="Products/D3500.html">Nikon D3500</a></li>
  <li class="listClass"><a href="Products/X1D II 50C.html">Hasselblad X1D II 50C</a></li>
</ul>

如果你想在取消对输入字段（而不是输入字段中的任何字母）的关注时再次显示所有结果，那么你可以使用 onblur 事件来实现，也可以通过如下修改输入字段并添加函数.

function Function2()
{
  let input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('Input');
  filter = input.value.toUpperCase();
  ul = document.getElementById("UL");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<input type="text" id="Input" onkeyup="Function()" onfocus="Function()" onblur="Function2()" placeholder="Search...">

Answer 2

鉴于您的 html 结构，您可以在一行 css:

中完成此操作

#Input:focus:placeholder-shown + ul {
  display:none;
}

之所以有效，是因为您的输入元素上有占位符文本，并且 <ul> 与其相邻。在这里阅读更多： https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

在输入文本之前如何隐藏搜索结果？

How can I hide search results until I've entered text?

html

javascript

css