Case insensitive jQuery :contains selector

This is a case insensitive jQuery :contains selector

by Ben Peachey

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/10170121/www/base.css">
<h1>Case insensitive jQuery <code>:contains</code> selector</h1>
<h2>Introduction</h2>
<p>
    This is a case insensitive jQuery <code>:contains</code> selector
</p>


<h2>Demo</h2>
<p>
    If you type a letter in the box below, you will see that the regular <code style="color: darkred;">:contains</code> selector only finds the letter in the same case, as the <code style="color:darkgreen;">:containsNC</code> selector finds both the upper-case as the lower-case
equivalent.     
</p>
<div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span>d</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
    <span>h</span>
    <span>i</span>
    <span>j</span>
    <span>k</span>
    <span>l</span>
    <span>n</span>
    <span>o</span>
    <span>p</span>
    <span>q</span>
    <span>r</span>
    <span>s</span>
    <span>t</span>
    <span>u</span>
    <span>v</span>
    <span>w</span>
    <span>x</span>
    <span>y</span>
    <span>z</span>

    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>G</span>
    <span>H</span>
    <span>I</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
    <span>M</span>
    <span>N</span>
    <span>O</span>
    <span>P</span>
    <span>Q</span>
    <span>R</span>
    <span>S</span>
    <span>T</span>
    <span>U</span>
    <span>V</span>
    <span>W</span>
    <span>X</span>
    <span>Y</span>
    <span>Z</span>
</div>

CSS

span{
    display: block;
    float: left;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border : 0.25em solid rgb(255,255,255);
}

.case-sensitive {
    border-bottom-color: rgb(180, 70, 70);
    border-right-color: rgb(180, 70, 70);
}

.case-insensitive {
    border-left-color: rgb(70, 180, 70);
    border-top-color: rgb(70, 180, 70);
}

JavaScript

/* THE DEMO */
$(function(){
    // Add the search box
    $('<input type="text" maxlength="1" size="2">').keyup(function(){
        $('span').removeClass('case-sensitive case-insensitive');
        $("span:contains('" + $(this).val() + "')").addClass('case-sensitive');
        $("span:containsNC('" + $(this).val() + "')").addClass('case-insensitive');
    }).insertBefore('div');        
})


/* THE ACTUAL CODE */    
;(function() {
    jQuery.expr[':'].containsNC =  function(elem, index, match) {
        return (elem.textContent || elem.innerText || jQuery(elem).text() || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0;
    }
}(jQuery));