Как показать предупреждающее сообщение "Результат не найден", если результат не найден с помощью JavaScript?

#javascript #filter

#javascript #Фильтр

Вопрос:

Как показать предупреждающее сообщение, если пользовательский запрос не найден. Когда пользователь вводит в строке поиска что-то вроде «asdfdsas», пользователь должен получить предупреждение типа «результат не найден». Есть ли какой-нибудь способ получить это с помощью javascript?

 function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i  ) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

1. где в вашем коде вы хотели бы получить это предупреждение?

2. Держу пари, у вас закончатся пользователи, если вы будете показывать предупреждение каждый раз, когда нажимается клавиша.

Ответ №1:

Не уверен, хотите ли вы предупреждение (предупреждение может быть довольно раздражающим) или сообщение.

Если вместо этого вы хотите сообщение.

Вот решение, и обратите внимание на комментарии:

 function myFunction() {
    var input, filter, ul, li, a, i, txtValue, noResu<
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    
    // no-result-found element
    noResult = document.querySelector('p');
    
    // determine if any result is found, false by default
    let found = false;
    for (i = 0; i < li.length; i  ) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
            // set found to true
            found = true;
        } else {
            li[i].style.display = "none";
        }
    }
    
    // if no results are found, show no-result-found element, and vice versa
    if(found) {
        noResult.style.display = 'none';
    } else {
        noResult.style.display = '';
        // if you want an alert instead, uncomment the next line and remove the previous line
        // alert('No result found');
    }
}

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<!-- Make an element for showing no result, hidden by default -->
<p style="display: none;">No result found</p>