There is a list created by the instructions https://www.w3schools.com/howto/howto_js_filter_lists.asp

The problem is that when you enter data that is not in the list, the output is empty. How to make it so that when entering non-existent data in the output it was written that nothing was found?

I do not really understand JS, I hope for support on this issue.

function myFunction() { // Declare variables var input, filter, ul, li, a, i; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); // Loop through all list items, and hide those who don't match the search query for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } 
 #myInput { background-image: url('/css/searchicon.png'); /* Add a search icon to input */ background-position: 10px 12px; /* Position the search icon */ background-repeat: no-repeat; /* Do not repeat the icon image */ width: 100%; /* Full-width */ font-size: 16px; /* Increase font-size */ padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ } #myUL { /* Remove default list styling */ list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; /* Add a border to all links */ margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; /* Grey background color */ padding: 12px; /* Add some padding */ text-decoration: none; /* Remove default text underline */ font-size: 18px; /* Increase the font-size */ color: black; /* Add a black text color */ display: block; /* Make it into a block element to fill the whole list */ } #myUL li a:hover:not(.header) { background-color: #eee; /* Add a hover effect to all links, except for headers */ } 
 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <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>

    2 answers 2

    Very simple:

    Created one block of the list or outside of it, it is not particularly important with the value No Results and id="noResult" , and by default it will be with us hidden display:none .

    The logic of the augmented script is also very simple:

    • Suppose that initially the list is empty, we create the variable empty=true inside. Also, don't forget to select the No Results element itself to access it.

    • We enter the value into the search engine: We run through the list, and if we get at least some element that is displayed, then our variable empty will immediately become false , because it’s logical that the list is no longer empty.

    • After this operation we create a condition:

      • If the list is empty: if (empty) then we make visible our preselected block noResult
      • Otherwise we hide

    Here’s how it looks in our code below:

     function myFunction() { // Объявляем переменные var input, filter, ul, li, a, i, empty, noResult; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); // Изначально подразумеваем что список у нас пустой empty = true; // Отбираем элемент NoResult noResult = document.getElementById("noResult"); // Цикл по всем элементам списка, и скрываем те блоки которые не соответствуют запросу введенному в поиск. for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = "block"; empty = false; // Если найден хотя бы 1 элемент } else { li[i].style.display = "none"; } } if (empty) { noResult.style.display = "block"; // Если пустой список } else { noResult.style.display = "none"; } } 
     #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block; } #myUL li a:hover:not(.header) { background-color: #eee; } /* Скрываем наш блок */ #noResult { display: none; } 
     <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <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> <li id="noResult"><a href="#">No results</a></li> </ul>

      for example, add after the list div # notfound

       <div id="notfound">Ничего не найдено</div>

      css:

       div#notfound{ display:none; }

      js:

       function myFunction() { // Declare variables //добавляем счетчик найденного found=0; var input, filter, ul, li, a, i; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); notfound=document.getElementById("notfound"); notfound.style.display="none";//скроем если при предыдущем цикле блок был показан // Loop through all list items, and hide those who don't match the search query for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { found++; li[i].style.display = ""; } else { li[i].style.display = "none"; } } if(found==0){ //если ничего не найдено покажем блок "Ничего не найдено" document.getElementById("notfound").style.display="block"; } }