Как добавить сообщение об отсутствии результатов в поиск по HTML списку на JavaScript

Оффтоп javascript
1

Поиск по списку с уведомлением о пустых результатах

У меня есть рабочий скрипт для поиска элементов в HTML списке. Все работает хорошо, но хочу улучшить функционал. Мне нужно добавить возможность показывать пользователю сообщение типа “Ничего не найдено” когда поисковый запрос не совпадает ни с одним элементом списка.

Вот мой текущий код:

function searchItems(){
    let query = document.getElementById('searchField').value.trim();
    let list = document.getElementById("itemList");
    let items = list.getElementsByTagName("li");
    let links = document.getElementsByTagName('a');
    let messageBox = document.getElementById('message');
    
    for(let j = 0 ; j < links.length ; j++){
       if(links[j].innerText.toLowerCase().indexOf(query) > -1){
           links[j].style.display="";
           links[j].style.color="blue";
       }else{
           links[j].style.display="none";
       }
     }
}

#searchField {
  width: 100%;
  font-size: 14px;
  padding: 10px 15px;
  border: 2px solid #ccc;
  margin-bottom: 10px;
}

#itemList {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#itemList li a {
  border: 1px solid #bbb;
  background-color: #f9f9f9;
  padding: 10px;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  display: block;
}

#itemList li a:hover {
  background-color: #ddd;
}

<input type="text" id="searchField" onkeyup="searchItems()" placeholder="Введите название...">
<ul id="itemList">
  <li><a href="#">Анна</a></li>
  <li><a href="#">Борис</a></li>
  <li><a href="#">Вера</a></li>
</ul>
<div id="message"></div>

Как мне модифицировать функцию чтобы она проверяла есть ли видимые результаты и показывала соответствующее сообщение?

2

Попробуй через флаг - создай found = false перед циклом. Нашёл совпадение? Ставь found = true. После цикла: if(!found && query) messageBox.innerHTML = ‘Результатов нет’. Никаких лишних массивов. А может ещё счётчик результатов добавить?

3

Добавь счетчик видимых элементов в функцию. После цикла проверь - если счетчик равен нулю, показывай сообщение:

let visibleCount = 0;
for(let j = 0 ; j < links.length ; j++){ 
   if(links[j].innerText.toLowerCase().indexOf(query) > -1){ 
       links[j].style.display="";
       visibleCount++;
   }else{
       links[j].style.display="none";
   }
}

if(visibleCount === 0 && query !== ''){
    messageBox.innerHTML = 'Ничего не найдено';
}else{
    messageBox.innerHTML = ''; 
}

query !== '' не даёт сообщению появляться при пустом поле поиска.

4

Можно еще проще - используй filter для подсчета видимых элементов. Добавь такую проверку после твоего цикла:

let visibleItems = Array.from(links).filter(link => link.style.display !== 'none');

if (visibleItems.length === 0 && query.length > 0) {
    messageBox.textContent = 'По вашему запросу ничего не найдено';
    messageBox.style.color = '#666';
} else {
    messageBox.textContent = '';
}

filter создает новый массив только с несокрытыми ссылками. И лучше textContent вместо innerHTML - безопаснее.