当我还在键入诸如"De"；下面的列表将显示"；Demi""；没有匹配"；但我仍然在打字，所以我该如何制作"；没有匹配"；是否仅在用户完成搜索键入后才显示？
usernameInput.addEventListener("keyup",function(){
const usernameInput = document.getElementById("usernameInput")
let userName = event.target.value.toLowerCase()
let allNamesDOMCollection = document.getElementsByClassName("name")
for(var count=0; count < allNamesDOMCollection.length;count++) {
const currentName = allNamesDOMCollection[count].textContent.toLowerCase()
if(currentName.includes(userName))
{allNamesDOMCollection[count].style.display = "block";
const nomatch = document.getElementById("nomatch");
nomatch.style.display = "none"
}
else
{
allNamesDOMCollection[count].style.display = "none";
const nomatch = document.getElementById("nomatch");
nomatch.style.display = "block"
}
}
});body {
font-family: 'Rubik', sans-serif;
width: 900px;
margin:0 auto
}
.container {
border: 3px solid;
margin: 2rem 0rem
}
/* searchbar */
.searchbar {
display:flex;
background-color: orange;
font-weight: 700;
font-size: 2rem;
}
.searchbar {
padding: 2rem;
}
#usernameInput {
margin-left:1rem;
width: 30%;
}
/* namelist */
.namelist {
background-color: rgba(16,95,229,.8);
padding: 1rem;
}
.liststar {
list-style:none;
margin:0;
padding-left:0;
}
li {
background-color: white;
margin:0.5em;
padding: 1rem;
font-size:1.2rem;
text-align:center;
}
#nomatch {
display:none
}<html>
<body>
<div class="container">
<div class="searchbar">
<label for="usernameInput">Search Users</label>
<input id="usernameInput" type="text">
</div>
<div class="namelist">
<ul class="liststar">
<li class="name">Demi</li>
<li class="name">Joe</li>
<li class="name">Jojo</li>
<li class="name">Lily</li>
<li class="name">Tata</li>
<li class="name">Momo</li>
<li class="name">Dad</li>
<li class="name">Sister</li>
<li id="nomatch"> no match</li>
</ul>
</div>
</div>
</body>主要问题是您正在隐藏/显示"没有匹配"；在每次循环迭代(列表中的每个单词(时，您需要在循环完成并检查完所有单词后做出决定。因此，移动nomatch.style.display = ...，使其位于循环之后，然后只有当您知道循环期间是否存在匹配时，才能正确设置它，因此您需要一个变量来跟踪它。
此外，您的代码使用了一些较旧的语法，并且可以进行相当大的简化。
请参阅联机评论：
// Get your DOM references just once
const nomatch = document.getElementById("nomatch");
const usernameInput = document.getElementById("usernameInput");
// .getElementsByClassName() is bad for performance
let allNamesDOMCollection = document.querySelectorAll(".name");
usernameInput.addEventListener("keyup", function(){
let searchValue = this.value.toLowerCase();
let itemsFound = false; // Keeps track of any possible matches
// Node lists can be looped over with Array.forEach()
allNamesDOMCollection.forEach(function(currentName){
if(currentName.textContent.toLowerCase().includes(searchValue)){
currentName.style.display = "block";
itemsFound = true;
} else {
currentName.style.display = "none";
}
});
// You should only show/hide "no match" after the loop
// is done checking all the entries.
nomatch.style.display = itemsFound ? "none" : "block";
});body {
font-family: 'Rubik', sans-serif;
width: 900px;
margin:0 auto
}
.container {
border: 3px solid;
margin: 2rem 0rem
}
/* searchbar */
.searchbar {
display:flex;
background-color: orange;
font-weight: 700;
font-size: 2rem;
}
.searchbar {
padding: 2rem;
}
#usernameInput {
margin-left:1rem;
width: 30%;
}
/* namelist */
.namelist {
background-color: rgba(16,95,229,.8);
padding: 1rem;
}
.liststar {
list-style:none;
margin:0;
padding-left:0;
}
li {
background-color: white;
margin:0.5em;
padding: 1rem;
font-size:1.2rem;
text-align:center;
}
#nomatch {
display:none
}<html>
<body>
<div class="container">
<div class="searchbar">
<label for="usernameInput">Search Users</label>
<input id="usernameInput" type="text">
</div>
<div class="namelist">
<ul class="liststar">
<li class="name">Demi</li>
<li class="name">Joe</li>
<li class="name">Jojo</li>
<li class="name">Lily</li>
<li class="name">Tata</li>
<li class="name">Momo</li>
<li class="name">Dad</li>
<li class="name">Sister</li>
<li id="nomatch"> no match</li>
</ul>
</div>
</div>
</body>