Question

我正在尝试创建此搜索功能，该功能会隐藏HTML不等于<li>值的所有<input>。

如何使用jQuery实现这一目标？

$('input').keypress(function(){
    if($('ul li').html != $('input').val()) {
        $(this).hide();
    }
});

Answer 1

你需要更像这样的东西：

$('input').keypress(function() {
    var inputValue = $("input").val().toLowerCase();
    $("li").each(function() {
         if($(this).html().toLowerCase().indexOf(inputValue) == -1)
         {
              $(this).hide();
         }
         else
         {
              $(this).show();
         }
    });
});

Answer 2

您应该收听keyup事件，以便在击键后获得<input>的值。您可以隐藏所有匹配的列表项.filter()，然后显示它。比较小写的值以获得不区分大小写的比较。

此外，比较那些不会严格“搜索”输入值的值，它只会显示项目是否要输入。您可以搜索与值相同长度的每个<li> HTML的子字符串：

$('input').keyup(function(){
    var value = $(this).val().toLowerCase();
    $('ul li').hide().filter(function(){
        return $(this).html().substring(0, value.length).toLowerCase() == value;
    }).show();
});

请记住，这不会考虑任何前导/尾随空格，但有$.trim()。

JSFiddle

使用jQuery按下每个输入键上的列表项

2 个答案: