在输入搜索框中清除时如何隐藏搜索结果？请只写JavaScript

在输入文本框内清除时，如何清除搜索结果？我在stackoverflow上尝试过这个答案-。不幸的是，它在这种特定的编码中不起作用

函数myFunction（）{
var query=document.querySelector（'#myInput'）.value；
//这将从页面上的所有
元素中获取所有
元素
//但是，您需要仅为希望包含的元素指定唯一属性
var elements=document.querySelectorAll（'li'）；
对于（var i=0；i

#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 10px；
边框：1px实心#ddd；
}
#myUL，#myUL2{
列表样式类型：无；
填充：0px；
边际：0px；
边缘顶部：10px；
}
#李妙儿，#李妙儿{
列表样式类型：无；
边框：1px实心#ddd；
填充物：5px；
背景色：#f6f6f6；
文字装饰：无；
字号：18px；
颜色：黑色；
边缘底部：5px；
}
#李妙儿，#李妙儿{
显示：无；
}
#myUL li a:悬停：非（.header），#myUL2 li a:悬停：非（.header）{
背景色：#eee；
}

测试搜索

当清除搜索输入字段时，如何从搜索筛选器隐藏列表项



描述
另一种描述

党卫军

在应用决定显示哪些元素的过滤逻辑之前，可以重置所有元素。下面是一个例子：

函数myFunction（）{
var query=document.querySelector（'#myInput'）.value；
var elements=Array.from（document.querySelectorAll（'li'）；
//重置所有元素。
elements.forEach（li=>li.style.display='none'）；
//显示包含查询文本的元素。
元素
.filter（li=>query&&li.innerText.indexOf（query）>=0）
.forEach（li=>li.style.display='block'）；
}

#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 10px；
边框：1px实心#ddd；
}
#myUL，#myUL2{
列表样式类型：无；
填充：0px；
边际：0px；
边缘顶部：10px；
}
#李妙儿，#李妙儿{
列表样式类型：无；
边框：1px实心#ddd；
填充物：5px；
背景色：#f6f6f6；
文字装饰：无；
字号：18px；
颜色：黑色；
边缘底部：5px；
}
#李妙儿，#李妙儿{
显示：无；
}
#myUL li a:悬停：非（.header），#myUL2 li a:悬停：非（.header）{
背景色：#eee；
}

测试搜索

当清除搜索输入字段时，如何从搜索筛选器隐藏列表项



描述
另一种描述

党卫军

在显示或隐藏元素时，您可以检查

查询是否已定义且不为空

if (query && el.innerText.indexOf(query) !== -1)

清除搜索框后，
query
将为空，此条件的计算结果为
false
，所有元素都将隐藏

现场示例：


函数myFunction（）{
var query=document.querySelector（'#myInput'）.value；
//这将从页面上的所有
元素中获取所有
元素
//但是，您需要仅为希望包含的元素指定唯一属性
var elements=document.querySelectorAll（'li'）；
对于（var i=0；i

#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 10px；
边框：1px实心#ddd；
}
#myUL，#myUL2{
列表样式类型：无；
填充：0px；
边际：0px；
边缘顶部：10px；
}
#李妙儿，#李妙儿{
列表样式类型：无；
边框：1px实心#ddd；
填充物：5px；
背景色：#f6f6f6；
文字装饰：无；
字号：18px；
颜色：黑色；
边缘底部：5px；
}
#李妙儿，#李妙儿{
显示：无；
}
#myUL li a:悬停：非（.header），#myUL2 li a:悬停：非（.header）{
背景色：#eee；
}

测试搜索

当清除搜索输入字段时，如何从搜索筛选器隐藏列表项



描述
另一种描述

党卫军








您可以通过添加以下三行来实现这一点：

let status = query === "" ? "none" : "block" //If input value is empty, set to "none"
document.querySelector("#myUL").style.display = status;
document.querySelector("#myUL2").style.display = status;

当输入为空时，这将隐藏两个div。否则，它将始终显示

看看新的例子：


函数myFunction（）{
var query=document.querySelector（'#myInput'）.value；
//这将从页面上的所有
元素中获取所有
元素
//但是，您需要仅为希望包含的元素指定唯一属性
var elements=document.querySelectorAll（'li'）；
让状态=查询==“”？“无”：“块”
document.querySelector（“#myUL”）.style.display=状态；
document.querySelector（“#myUL2”）.style.display=状态；
对于（var i=0；i