Question

寻找一种jquery方法，通过用户输入缩小无序列表的范围。列表中的每个项目都包含名字和姓氏。目的是使用两者来缩小列表范围，因此如果第一个字母是“x”，则将清除名字或姓氏中没有“x”的所有项目。此外，如果列表缩小到0 id就像激活一个函数（ajax调用，但可能是任何东西）。

html：

<input id="listCheck">
    <ul>
    <li class="entry"><span class="nametext">alex crain</span></li>
    <li class="entry"><span class="nametext">Bart Simpson</span></li>
    <li class="entry"><span class="nametext">Jessica Alba</span></li>
    <li class="entry"><span class="nametext">Will Farrell</span></li>
    </ul>

JS：

$("listCheck").keyup(function(){
    var term = $(this).val();    
});

我假设我需要将跨度转换为一个数组，其中包含名字和姓氏，然后循环遍历它们。 Fiddle

Answer 1

喜欢这个

$('#listSearch').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    $('.navList>li').each(function(){
     var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();            
   });
});

Demo Fiddle

//您可以使用if else代替三元运算符。

Answer 2

您可以使用:contains() selector进行操作，而不是使用indexOf。它不会更快，但代码看起来会更清晰：

$("li:contains(term)").show();
$("li:not(:contains(term))").hide();

等。 Here's a demo on your fiddle

Answer 3

试试这个：

$("#listCheck").keyup(function(){
var txt = $(this).val();

      $('.nametext').each(function () 
        {
            if($(this).html().indexOf(txt) >= 0)
            {
                   $(this).parent().show();
            }
            else
            {
                $(this).parent().hide();
                //$(this).parent().remove();
            }
        });

});

这是工作示例HERE

根据用户输入清除列表中的项目

3 个答案:

Demo Fiddle