如何檢查輸入跨度值中的任何單詞

Question

嗨，我的朋友我想創建搜索框，我希望當任何人輸入任何單詞開始搜索和控制檯結果。

這是我的代碼：

<input type="text" id="search"> //search input 
<ul id="all"> 
    <li><span>Andro</span></li> 
    <li><span>andre</span></li> 
    <li><span>Marcos</span></li> 
    <li><span>mamaaaaa</span></li> 
    <li><span>louis</span></li> 
</ul> 

jQuery的

var $all = $('#all'); 
    $('#search').on('keyup', function() { 
     $all.find('li').hide(); 
     //I want check span value with enter any key 
     //(point: span value should to be lowerCase) 
    }); 

請指導我如何小寫的跨度值，檢查小寫輸入任何文字

Answer 1

嘗試

jQuery(function($){ 
    var $lis = $('#all li'); 
    $('#search').on('keyup', function() { 
     var regex = new RegExp(this.value, 'i'); 

     //hide all li elements 
     $lis.hide(); 

     //now filter those li elements which is having the searched text and show them 
     $lis.filter(function(){ 
      return regex.test($(this).find('.name').text()); 
     }).show(); 
    }); 
}) 

演示：Fiddle

Answer 2

這是非常基本的，但應該做的伎倆！

var $all = $('#all'); 
var $search = $('#search').val().toLowerCase(); 

$('#search').on('keyup', function() { 
    $all.find('li').hide().each(function() { 
     if ($(this).text().toLowerCase().indexOf($search) != -1) 
      $(this).show(); 
    }); 
}); 

Answer 3

看到這個demo

var $all = $('#all'); 
$('#search').on('keyup', function() { 
    var txt = $(this).val().toLowerCase(); 
    $("#all li").each(function() { 
     var span_value = $(this).find("span").text().toLowerCase(); 
     if (span_value.indexOf(txt) == -1) { 
      $(this).hide();  
     } else { 
      $(this).show();  
     } 
    }); 
});