Блог

Главная - Вопросы по программированию - Js для создания строки поиска / Как мне сделать так, чтобы «нет совпадения» отображалось только после того, как пользователь закончил вводить в своем поиске?/

Js для создания строки поиска / Как мне сделать так, чтобы «нет совпадения» отображалось только после того, как пользователь закончил вводить в своем поиске?/

#javascript #html #css #dom-events #display

#javascript #HTML #css #dom-события #отобразить

Вопрос:

Когда я все еще набираю, например, «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>

Комментарии:

1. Как бы вы узнали, что они закончили печатать?

Ответ №1:

Основная проблема заключается в том, что вы скрываете / показываете «нет совпадения» при каждой итерации цикла (каждое слово в списке), где вам нужно принять это решение после завершения цикла, и вы проверили все слова. Поэтому переместите 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>