Searching table rows with jQuery Non-Case sensitive

Question

I am trying out this nice little jQuery script for searching tables found here:

It works great, however I don't want it to be case sensitive, for example if a value in my table is Value One, I want to be able to search value one, or VALUE ONE and still get the right outcome.

This is the Jquery that controls it:

<script>
$(document).ready(function(){
$('input[name="search"]').keyup(function(){
  var searchterm = $(this).val();
  if(searchterm.length > 3) {
   var match = $('tr.data-row:contains("' + searchterm + '")');
   var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');
   match.addClass('selected');
   nomatch.css("display", "none");
  } else {
   $('tr.data-row').css("display", "");
   $('tr.data-row').removeClass('selected');
  }
});
});
</script>

Can anyone help me with making it non case sensitive?

Would someone please put the CODE in their answer? – Mike Robinson Mar 26 '13 at 17:09 — Mike Robinson, Mar 26 '13 at 17:09

score 0 · Answer 1 · answered Mar 26 '13 at 17:11

You can turn both strings into lowercase with the toLowerCase() method.

It should look something like this:

$(document).ready(function(){
$('input[name="search"]').keyup(function(){
  var searchterm = $(this).val();
  searchterm=searchterm.toLowerCase();  
  if(searchterm.length > 3) {
   var match = $('tr.data-row:contains("' + searchterm + '")');
   var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');
   match.addClass('selected');
   nomatch.css("display", "none");
  } else {
   $('tr.data-row').css("display", "");
   $('tr.data-row').removeClass('selected');
  }
});
});

And you will need to override the jQuery method too! Something that looks like this...

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toLowerCase().indexOf(arg.toLowerCase()) >= 0;
    };
});

It is pretty straight forward, all that you're doing is forcing both strings to be lower case before comparing them. That way you skip the different cases issue.

Hope this helps, good luck.

Hmmmm, doesn't seem to work. It will allow me to search something that is entirely lower case and if i change toLowerCase to toUpperCase allows me to search something entirely upper case but not something that has both upper and lower using just upper or lower. — snookian, Mar 27 '13 at 09:18
You should check if you are really overriding jQuery's contains method. Try adding an alert inside the .contains method override to check, if it's not then you're probably declaring that wrong. Also, remember you must override the method before you call it, otherwise you won't be calling the overriden method. — Ryoku, Mar 27 '13 at 16:47

score -1 · Answer 2 · answered Mar 26 '13 at 17:11

-1

Your best best might be to write your own selector expression like this:

$.expr[":"].containsCI = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

answered Mar 26 '13 at 17:11

Mike Brant

70,514
10
99
103

score -2 · Answer 3 · answered Mar 26 '13 at 17:06

You can find the solution here : Link , this will override the orginal ":contains" selector

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});

Searching table rows with jQuery Non-Case sensitive

3 Answers3