搜索下拉Javascript-如何隐藏列表?
我是Javascript/HTML/CSS的初学者。如果我遗漏了一些明显的东西,我很抱歉 我的任务:我想在我的网站(图片网站)上创建一个搜索栏。有了这个搜索栏,用户应该能够搜索我将在列表中确定的“关键字”。我的列表中的每一项都应该引导用户到一个新的html站点 我的问题:我创建的列表在搜索输入下可见。但我想先隐藏列表,然后显示用户在搜索栏中输入的建议或匹配项。但是如果我把列表隐藏在css中,当输入中有输入时,它显然也不会显示匹配项。我在底部包括了代码和屏幕截图。谢谢搜索下拉Javascript-如何隐藏列表?,javascript,html,css,hide,Javascript,Html,Css,Hide,我是Javascript/HTML/CSS的初学者。如果我遗漏了一些明显的东西,我很抱歉 我的任务:我想在我的网站(图片网站)上创建一个搜索栏。有了这个搜索栏,用户应该能够搜索我将在列表中确定的“关键字”。我的列表中的每一项都应该引导用户到一个新的html站点 我的问题:我创建的列表在搜索输入下可见。但我想先隐藏列表,然后显示用户在搜索栏中输入的建议或匹配项。但是如果我把列表隐藏在css中,当输入中有输入时,它显然也不会显示匹配项。我在底部包括了代码和屏幕截图。谢谢 <input type
<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>
函数myFunction(){
var输入、滤波器、ul、li、a、i、TXT值;
输入=document.getElementById(“myInput”);
filter=input.value.toUpperCase();
ul=document.getElementById(“myUL”);
li=ul.getElementsByTagName(“li”);
对于(i=0;i-1){
李[i].style.display=“”;
}否则{
li[i].style.display=“无”;
}
}
}
截图:
我列表中的所有建议都显示出来了,如果输入中没有键入任何内容,我如何隐藏它们?
您可以使用在
中已经使用过的相同想法,使用显示:none
隐藏元素,然后在每次调用myFunction()
时,检查
的内容,并相应地编辑
样式:
// 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;