比較字符串和每個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>