How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "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>