[英]Compare string to each li element
I would like to compare a input against li elements but for some reason it's only checking the last li element. 我想将输入与li元素进行比较,但由于某种原因,它仅检查最后一个li元素。 You can see this when running the script below everything with "test" works fine but not for "example" or "example 2"
在“ 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>
So my question is how can I compare the input against each li element. 所以我的问题是如何比较每个li元素的输入。 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()
我忘了提到的是,在
li
元素中可能是img
这就是我使用$li.text()
Instead of looping through all the li
's when anything is entered in the input, you can try to use the pseudo selector :contains
. 您可以尝试使用伪选择器
:contains
,而不是在输入中输入任何内容时遍历所有li
。 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>
Need to remove $select.addClass('hide');
需要删除
$select.addClass('hide');
. 。 It's called when the input does not match
test
, even when it may match example
. 当输入与
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>
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. 您必须将类
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.