Jquery filter list without case sensitive

jquery

Solution

You need to use `indexOf`

$(this).text().search(value)

supposed to be

$(this).text().indexOf(value)

And why do you want to attach your event using the attribute tag.It is a bad practice and should be avoided.

You can use jQuery to attach the event.

$('input').keyup(function() {
    filter(this); 
});

function filter(element) {
    var value = $(element).val().toLowerCase();
    $("#theList > li").each(function () {
        var $this = $(this),
            lower = $this.text;
        if (lower.indexOf(value) > -1) {
            $this.show();
        } else {
            $this.hide();
        }
    });
}

Check Fiddle

Same function a little better using `filter`

function filter(element) {
    var value = $(element).val().toLowerCase();
    $("#theList > li").hide().filter(function() {
        return $(this).text().toLowerCase().indexOf(value) > -1;
    }).show();
}

Problem

I want to filter the list without case sensitive. I want to match only character not match upper case or lower case. - XXXXXXX - yyyyyyy - XXxxx If I enter "X" in search box it displays both 1 and 3. I added the code below but it match the case sensitive also. ``` <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> function filter(element) { var value = $(element).val(); $("#theList > li").each(function() { if ($(this).text().search(value) > -1) { $(this).show(); } else { $(this).hide(); } }); } </script> </head> <body> <input type="text" onkeyup="filter(this)" /> <ul id="theList"> <li>xxvxvxx</li> <li>yyyyyyyyyy</li> <li>rrrrrrrrrr</li> <li>vvvvvvvvvvv</li> <li>xcvcvdfsdf</li> <li>hkjhkhjkh</li> <li>xzfgfhfgh</li> </ul> </body> </html> ```

Original source

Related problems