比较字符串和每个li元素

Question

我想将输入与li元素进行比较，但由于某种原因，它仅检查最后一个li元素。 在“ test”的所有内容下方运行脚本时，您可以看到此代码，但对于“ example”或“ 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> 

所以我的问题是如何比较每个li元素的输入。 提前致谢。

更新资料

我忘了提到的是，在li元素中可能是img这就是我使用$li.text()

Answer 1

您可以尝试使用伪选择器:contains ，而不是在输入中输入任何内容时遍历所有li 。 这将查找我们提供的文本中的所有元素，并且如果您要查找以搜索字符串开头的元素，那么您可能需要即兴一点。 该线程可能会有所帮助。

 $(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

需要删除$select.addClass('hide'); 。 当输入与test不匹配时调用它，即使它可能与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

您必须将类hide设置为li而不是ul在#autocomplete keyup事件中遍历li ，该事件包含文本框值，从中删除类hide ，然后添加不包含的类hide 。

 $(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>