jquery - how to check typing any word in span value

Question

hi my friend I want to create search box and I want when anybody typing any word start searching and console result it.

this is my code:

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

please guide me how to lowerCase spans value and check lowerCase typing any word

Answer 1

Try

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

Demo: Fiddle

Answer 2

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

Answer 3

This is very basic, but should do the trick!

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