jQuery usage of contains and toLowerCase()

Question

I'm trying to compare a string given in an input to a div's content using jQuery contain.

Problem is, I want to be able to check if the string is contained regardless of upper/lower case.

This is my function:

$(document).ready(function() {
    drawDimensions('dContent');
    $('#dSuggest').keyup(function() {
        var dInput = this.value;
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

So if one of the .dDimension divs contains 'Date' and a user presses the 'd' key, I want to show that item.

is it possible?

Answer 1

You can use .filter ^[docs]:

var dInput = this.value.toLowerCase();

$(".dDimension").filter(function() {
    return $(this).text().toLowerCase().indexOf(dInput) > -1;
}).css("display","block");

Answer 2

You can write your own selector by extending jQuery. Try this

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

Useage $(".dDimension:containsi('" + dInput + "')").css("display","block");