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 cont

Answer 1

The last comments in the jQuery documentation for contains provides an 'icontains' implementation that may suit you.

$.expr[':'].icontains = function(obj, index, meta, stack){
    return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

// Example usage.
$("div:icontains('John')").css("text-decoration", "underline"); 

Answer 2

Have a look at this example, he extend the jQuery selectors with a case-insensitive contains selector that he calls containsi, like this:

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

Answer 3

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

Answer 4

You can use .filter [docs]:

var dInput = this.value.toLowerCase();

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