I want to filter the list without case sensitive. I want to match only character not match upper case or lower case.
Just Add
jQuery.expr[":"].contains = function (a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};
Try this :
function filter(element) {
var value = $(element).val();
$("#theList > li").hide();
$("#theList > li:contains('" + value + "')").show();
}
Just replace
$(this).text().search(value) > -1
with:
$(this).text().search(new RegExp(value, "i")) > -1
and that should do the trick. Here is a working FIDDLE
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();
}