Search Dropdown Javascript - 如何隐藏列表？

Question

我是 Javascript/HTML/CSS 的初学者。所以如果我遗漏了一些明显的东西，我很抱歉。

我的任务：我想在我的网站（图片网站）上创建一个搜索栏。使用此搜索栏，用户应该能够搜索我将在列表中确定的“关键字”。我列表中的每一项都应将用户引导至一个新的 html 站点。

我的问题：我创建的列表在搜索输入下可见。但我想首先隐藏列表，只显示用户在搜索栏中输入的建议或匹配项。但是，如果我将列表隐藏在 css 中，当输入中输入某些内容时，它显然也不会显示匹配项。我在底部包含了代码和屏幕截图。谢谢！

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Topic.." title="Type in a name">
    
    <ul id="myUL">
      <li><a href="shuffle4.html">School</a></li>
      <li><a href="shuffle4.html">Sport</a></li>
      <li><a href="shuffle4.html">Tennis</a></li>
      <li><a href="shuffle4.html">Work</a></li>
      <li><a href="shuffle4.html">Funny</a></li>
      <li><a href="shuffle4.html">Money</a></li>
      <li><a href="shuffle4.html">Food</a></li>
    </ul>
    
    <script>
    function myFunction() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        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";
            }
        }
    }
    </script>

截图：我列表中的所有建议都在显示，如果输入中没有输入任何内容，我该如何隐藏它们？

Answer 1

您可以使用您在 <li> 中使用的相同想法，使用 display: none 隐藏元素，然后在每次调用 myFunction() 时检查内容<input> 并相应地编辑 <ul> 样式：

// If we've got more than 1 char in <input>, show it, otherwise, hide
const inputDisplay = input.value.length > 1 ? 'block' : 'none';
ul.style.display = inputDisplay;

function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");

// If we've got more than 1 char in <input>, show it, otherwise, hide
const inputDisplay = input.value.length > 1 ? 'block' : 'none';
ul.style.display = inputDisplay;

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";
    }
}
}

ul { display: none; }

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Topic.." title="Type in a name">

<ul id="myUL">
<li><a href="shuffle4.html">School</a></li>
<li><a href="shuffle4.html">Sport</a></li>
<li><a href="shuffle4.html">Tennis</a></li>
<li><a href="shuffle4.html">Work</a></li>
<li><a href="shuffle4.html">Funny</a></li>
<li><a href="shuffle4.html">Money</a></li>
<li><a href="shuffle4.html">Food</a></li>
</ul>

Search Dropdown Javascript - 如何隐藏列表？

Search Dropdown Javascript - How to hide list?

javascript

html

css

hide