Javascript Js用于制作搜索栏/我如何制作“；“不匹配”；是否仅在用户完成搜索后显示/

当我仍然键入如“De”时，下面的列表将显示“Demi”和“no match”，但我仍然键入，那么如何使“no match”仅在用户完成搜索后显示

usernameInput.addEventListener（“keyup”，function（））{
const usernameInput=document.getElementById（“usernameInput”）
让userName=event.target.value.toLowerCase（）
让allNamesDOMCollection=document.getElementsByClassName（“名称”）
对于（var count=0；count
正文{
字体系列：“Rubik”，无衬线；
宽度：900px；
保证金：0自动
}
.集装箱{
边框：3倍实心；
保证金：2rem 0rem
}
/*搜索栏*/
.搜索栏{
显示器：flex；
背景颜色：橙色；
字号：700；
字号：2rem；
}
.搜索栏{
填充：2rem；
}
#用户名输入{
左边距：1 em；
宽度：30%；
}
/*名单*/
.名单{
背景色：rgba（16,95229,8）；
填充：1rem；
}
liststar先生{
列表样式：无；
保证金：0；
左侧填充：0；
}
李{
背景色：白色；
边缘：0.5em；
填充：1rem；
字号：1.2rem；
文本对齐：居中；
}
#游牧民族{
显示：无
}

搜索用户

Demi
乔
Jojo
莉莉
塔塔
Momo
爸爸
姐姐
不匹配

主要问题是在每次循环迭代（列表中的每个单词）时隐藏/显示“不匹配”，需要在循环完成并检查所有单词后做出决定。因此，移动
nomatch.style.display=…
，使其位于循环之后，然后只有在知道循环期间是否存在匹配时才能正确设置它，因此需要一个变量来跟踪它

此外，您的代码使用了一些较旧的语法，可以简化很多

请参阅内联注释：


//只获取一次DOM引用
const nomatch=document.getElementById（“nomatch”）；
const usernameInput=document.getElementById（“usernameInput”）；
//.GetElementsByCassName（）对性能有害
让allNamesDOMCollection=document.querySelectorAll（“.name”）；
usernameInput.addEventListener（“keyup”，function（））{
让searchValue=this.value.toLowerCase（）；
let itemsFound=false；//跟踪任何可能的匹配项
//节点列表可以通过Array.forEach（）循环
AllNamesDomainCollection.forEach（函数（currentName）{
if（currentName.textContent.toLowerCase（）.includes（searchValue））{
currentName.style.display=“块”；
itemsFound=true；
}否则{
currentName.style.display=“无”；
}
});
//您应该只在循环后显示/隐藏“不匹配”
//已完成对所有条目的检查。
nomatch.style.display=itemsFound？“无”：“块”；
});
正文{
字体系列：“Rubik”，无衬线；
宽度：900px；
保证金：0自动
}
.集装箱{
边框：3倍实心；
保证金：2rem 0rem
}
/*搜索栏*/
.搜索栏{
显示器：flex；
背景颜色：橙色；
字号：700；
字号：2rem；
}
.搜索栏{
填充：2rem；
}
#用户名输入{
左边距：1 em；
宽度：30%；
}
/*名单*/
.名单{
背景色：rgba（16,95229,8）；
填充：1rem；
}
liststar先生{
列表样式：无；
保证金：0；
左侧填充：0；
}
李{
背景色：白色；
边缘：0.5em；
填充：1rem；
字号：1.2rem；
文本对齐：居中；
}
#游牧民族{
显示：无
}

搜索用户

Demi
乔
Jojo
莉莉
塔塔
Momo
爸爸
姐姐
不匹配

你怎么知道他们已经打字完毕？