javascript筛选/搜索Html列表

这是一个简单的程序，用于从html列表中搜索项目。它工作得非常完美。但是，如果输入与列表中的项目不匹配，如何通过添加几行代码来显示消息（如未找到任何内容或未找到任何结果），从而使其更高级

函数myFunction（）{
让输入=document.getElementById（'myInput'）.value.trim（）；
设ul=document.getElementById（“myUL”）；
设li=ul.getElementsByTagName（“li”）；
设anch=document.getElementsByTagName（'a'）；
设res=document.getElementById（'result'）；
for（设i=0；i-1）{
anch[i].style.display=“”；
anch[i].style.color=“red”；
}否则{
anch[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；/*增加字体大小*/
颜色：黑色；/*添加黑色文本颜色*/
display:block；/*将其放入块元素以填充整个列表*/
}
#myUL li a:悬停：非（.header）{
背景色：#eee；/*为所有链接（标题除外）添加悬停效果*/
}

搜寻

试着这样做：

函数myFunction（）{
让输入=document.getElementById（'myInput'）.value.trim（）；
设ul=document.getElementById（“myUL”）；
设li=ul.getElementsByTagName（“li”）；
设anch=document.getElementsByTagName（'a'）；
设res=document.getElementById（'result'）；
让noresult=document.getElementById（'noresult'）；
设resfound=false；
for（设i=0；i-1）{
anch[i].style.display=“”；
anch[i].style.color=“red”；
resfound=true；
}否则{
anch[i].style.display=“无”；
}
}
如果（重新找到）{
noresult.style.display=“无”
}否则{
noresult.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；/*增加字体大小*/
颜色：黑色；/*添加黑色文本颜色*/
display:block；/*将其放入块元素以填充整个列表*/
}
#myUL li a:悬停：非（.header）{
背景色：#eee；/*为所有链接（标题除外）添加悬停效果*/
}

搜寻
未找到任何结果

只需使用一个变量即可知道循环结束时是否存在一致性

var somethingFound=false;
...
for(let i = 0 ; i < anch.length ; i++){
   if(anch[i].innerText.toLowerCase().indexOf(input) > -1){
       ...
       somethingFound=true; //or somethingFound++ if you wan to keep a count
   } else {
       ...
   }
}
document.querySelector("#nothingFoundMessage").style.display=somethingFound?"block":"none"; //or something similar

var somethingFound=false；
...
for（设i=0；i-1）{
...
somethingfund=true；//或somethingfund++如果您想保持计数
}否则{
...
}
}
document.querySelector（“#nothingFoundMessage”）.style.display=somethingFound？”块：“无”//或者类似的东西

这是不对的。如果发现结果但最后一项不匹配怎么办<代码>noresult将可见。