根據用戶輸入從列表中清除項目

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();    
});

我假設我需要將跨度轉換成名字和姓氏分開的數組，然后遍歷它們。 小提琴

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();            
   });
});

演示小提琴

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

Answer 2

除了使用indexOf您還可以使用:contains()選擇器 。 它不會更快，但是代碼看起來會更干凈：

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

等等。 這是您的小提琴上的演示

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