I wrote a small code for searching using inputa. In the list I need, everything works.

How to produce a result if no matches were found?

<div class="search-container"> <button class="search-choice">Tag</button> <button class="search-btn"></button> <div class="result-container"> <input type="text" autocomplete="off" class="input" placeholder="Enter tag"> <ul class="search-list"> <li>Tag</li> <li>Dog</li> <li>Cat</li> <li>Owl</li> <li>Dragon</li> <li>Bear</li> <li>Lettering</li> <li>Bird</li> </ul> </div> </div> jQuery.expr[':'].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; $('.input').on('keyup', function(){ var val = $(this).val(); $('.search-list li:contains("'+val+'")').show(); $('.search-list li:not(:contains("'+val+'"))').slideUp(); });
  • And what you want to give the result, if not found? and where? - cyadvert
  • Corrected the post, in the block result-container, for example No results match ... - scDisorder
  • check that length>0 - if true - was found, no - no - Grundy

1 answer 1

I solved the problem as follows, thanks to the Grundy user, the following section was added to the function:

 if (li.length == 0 ) { $('.no-result').slideDown(); $('.no-result').text('No results match for '+val+'...'); } else { $('.no-result').slideUp(); $('.no-result').val(''); }