JQuery list search

html

<div><input type="text" id="search" placeholder="Search" /></div>
<div>
    <ul id="item-container">
        <li class="items">Apple</li>
        <li class="items">Orange</li>
        <li class="items">Grapes</li>
        <li class="items">Banana</li>
    </ul>
</div>

javascript

//requires at least jquery 1.8
$(function(){
    //overwrites the selector and covert it to case-insensitive
    $.expr[":"].contains = $.expr.createPseudo(function(arg) {
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    });
    
    //or make a new one
    $.expr[":"].containsIgnoreCase = $.expr.createPseudo(function(arg) {
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    });
    
    $("#search").keyup(function(){
        var data = this.value.split(" ");
        var obj = $("#item-container").find("li.items");
        if(this.value == ""){
            obj.show();
        }else{            
            obj.hide();
            $.each(data, function(i, v){
               //obj = obj.filter("*:contains('"+v.toLowerCase()+"')");
               obj = obj.filter("*:containsIgnoreCase('"+v.toLowerCase()+"')");
            });
            
            obj.show();
        }
    });
});