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?

possible duplicate of [Is there a case insensitive jQuery :contains selector?](http://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector) — Shadow Wizard Says No More War, Jan 09 '12 at 22:03

score 28 · Accepted Answer · answered Jan 09 '12 at 22:01

28

You can use .filter ^[docs]:

var dInput = this.value.toLowerCase();

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

answered Jan 09 '12 at 22:01

Felix Kling

756,363
169
1,062
1,111

can I use the ``not`` function to check the opposite? – Or Weinberger Jan 09 '12 at 22:07
Sure. Or you change `> -1` to `=== -1`. – Felix Kling Jan 09 '12 at 22:09

score 1 · Answer 2 · answered Jan 09 '12 at 22:03

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

score 1 · Answer 3 · answered Jan 09 '12 at 22:10

1

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

answered Jan 09 '12 at 22:10

Christofer Eliasson

31,342
6
71
100

That's pretty much the same what [ShankarSangoli posted](http://stackoverflow.com/a/8795791/218196). – Felix Kling Jan 09 '12 at 22:11
@FelixKling Yeah, that seems to be the exact same thing. Without the ref to the original author though :) – Christofer Eliasson Jan 09 '12 at 22:14

score 0 · Answer 4 · answered Jan 09 '12 at 22:03

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

jQuery usage of contains and toLowerCase()

4 Answers4

Linked

Related