Javascript 显示隐藏<；李>；元素

我正在创建一个带有实时列表过滤的简单html搜索框。用户将在搜索框中输入文本，列表将根据用户输入的数据进行过滤。我面临的问题是，在我使用代码隐藏“li”元素后，我的列表没有显示出来。至于隐藏列表部分，css的功能非常精确，但查询功能没有列出结果。这是代码

函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
$（“.menu hide”）.show（）；/-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

*{
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
#李美儿{
边框：1px实心#ddd；
页边顶部：-1px；
/*防止双重边界*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}
.菜单隐藏{
显示：无；
}

我的电话簿

那里的代码比需要的多得多，而且只有一行jQuery，这很容易消除

另外，您的演示实际上没有加载jQuery库，因此这将是一个问题

下面是一个重写，它保持了与初始方法相近的内容，但使用

querySelectorAll

简化了DOM选择，并删除了不必要的库

点击演示

函数myFunction（）{
var filter=document.getElementById（“myInput”）.value.toUpperCase（）.trim（）；
document.querySelector（“.menu hide”）.style.display=过滤器？“块”：“无”；
var a=document.queryselectoral（“myUL li a”）；
对于（变量i=0；i-1）{
a[i].style.display=“”；
}否则{
a[i].style.display=“无”；
}
}
}

*{
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
#李美儿{
边框：1px实心#ddd；
页边顶部：-1px；
/*防止双重边界*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}
.菜单隐藏{
显示：无；
}

我的电话簿

它们将在输入文本时显示，是否要显示所有列表time@Bhuwan我的编辑有问题吗：-）他们在输入文本时没有出现。我希望他们只显示搜索框中键入的结果。不是所有的列表。非常感谢你修改了我的代码。在编辑的代码中，在搜索框中输入值时，列表会显示，但在搜索值后，列表不会隐藏。搜索后会显示整个列表。搜索字段再次为空后是否可以隐藏。？？对不起，问了个愚蠢的问题。我是个新手：）@DamagedBroadcast：是的，我不知道你想要什么。当输入为空时，我将更新两个演示以隐藏列表。非常感谢：）您帮助我从这个小片段中学到了很多。我很困惑，在搜索页面的海洋中徘徊，没有运气。再次感谢你帮了我的忙。。