Compare string to each li element

Question

I would like to compare a input against li elements but for some reason it's only checking the last li element. You can see this when running the script below everything with "test" works fine but not for "example" or "example 2"

 $(document).ready(function() { var $input = $('#autocomplete'); $(document).on('keyup', $input, function() { var $val = $input.val().trim(), $select = $('.autocomplete-content'); // Check if the input isn't empty if ($val != '') { $select.children('li').each(function() { var $li = $(this), $html = $li.html(), $text = $li.text().trim(); // Set input value $li.click(function() { $input.val($text); }); // Check if the value has at least 1 match else hide if ($text.indexOf($val) !== -1) { // Remove class hide when input changes and finds a match if ($li.hasClass('hide')) { $li.removeClass('hide'); } // Unhide "ul.autocomplete-content" if ($select.hasClass('hide')) { $select.removeClass('hide'); // Show options } } else { $li.addClass('hide'); $select.addClass('hide'); // Hide options } }); } else { $select.addClass('hide'); } }); }); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="autocomplete" class="autocomplete"> <ul class="autocomplete-content hide"> <li><img src="test.jpg"> example</li> <li><img src="test.jpg"> example 2</li> <li><img src="test.jpg"> test</li> </ul> 

So my question is how can I compare the input against each li element. Thanks in advance.

Update

Something I forgot to mention was that in the li element could be an img thats the reason why I used $li.text()

Answer 1

Instead of looping through all the li 's when anything is entered in the input, you can try to use the pseudo selector :contains . This finds all elements with the text we have provided and if your intention is to find elements which starts with the search string, then you might need to improvise a little. This thread might be helpful.

 $(document).ready(function() { var $input = $('#autocomplete'); $(document).on('keyup', $input, function() { var $val = $input.val().trim(), $select = $('.autocomplete-content'); // Check if the input isn't empty if ($val != '') { $select.children('li').addClass('hide') $select.children('li').filter(function() { console.log($(this).text().indexOf($val)) return $(this).text().indexOf($val) !== -1; }).removeClass('hide'); } else { $select.children().addClass('hide'); } }); }); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="autocomplete" class="autocomplete"> <ul class="autocomplete-content"> <li class="hide"><img src="test.jpg"> example</li> <li class="hide"><img src="test.jpg"> example 2</li> <li class="hide"><img src="test.jpg"> test</li> </ul> 

Answer 2

Need to remove $select.addClass('hide'); . It's called when the input does not match test , even when it may match example .

 $(document).ready(function() { var $input = $('#autocomplete'); $(document).on('keyup', $input, function() { var $val = $input.val().trim(), $select = $('.autocomplete-content'); // Check if the input isn't empty if ($val != '') { $select.children('li').each(function() { var $li = $(this), $html = $li.html(), $text = $li.text().trim(); // Set input value $li.click(function() { $input.val($text); }); // Check if the value has at least 1 match else hide if ($text.indexOf($val) !== -1) { // Remove class hide when input changes and finds a match if ($li.hasClass('hide')) { $li.removeClass('hide'); } // Unhide "ul.autocomplete-content" if ($select.hasClass('hide')) { $select.removeClass('hide'); // Show options } } else { $li.addClass('hide'); //$select.addClass('hide'); // Hide options } }); } else { $select.addClass('hide'); } }); }); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="autocomplete" class="autocomplete"> <ul class="autocomplete-content hide"> <li>example</li> <li>example 2</li> <li>test</li> </ul> 

Answer 3

You have to set class hide to li instead of ul On keyup event of #autocomplete iterate through the li s, which one contains the textbox value remove class hide from that and add class hide which one not contains.

 $(document).on('keyup', '#autocomplete', function () { var text = $(this).val(); $('.autocomplete-content li').each(function () { if ($(this).text().trim().indexOf(text) > -1) { $(this).removeClass('hide'); } else { $(this).addClass('hide'); } }); }); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="autocomplete" class="autocomplete"> <ul class="autocomplete-content"> <li class="hide"><img src="test.jpg"> example</li> <li class="hide"><img src="test.jpg"> example 2</li> <li class="hide"><img src="test.jpg"> test</li> </ul>