用于制作搜索栏的 Js /如何让 "no match" 仅在用户输入完搜索后出现？/

Question

当我仍在键入“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>

Answer 1

主要问题是您在每次循环迭代（列表中的每个单词）时都hiding/showing“不匹配”，您需要在循环完成并检查后做出决定所有的话。因此，移动 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>

用于制作搜索栏的 Js /如何让 "no match" 仅在用户输入完搜索后出现？/

Js for making a search bar /How do I make "no match" appear only after the user has finished typing in their search?/

html

javascript

css

dom-events

display