Simple case insensitive search box for a table with jQuery

Question

I'm tyring to make a simple sorting search box for a table.

I have the following code:

<input name="search" />
<table id="content">
    <tr class="item"> (...) </tr>
    <tr class="item"> (...) </tr>
</table>

$(document).ready(function(){
    $('input[name="search"]').keydown(function(){
    $('tr.item:contains("' + $(this).val()+ '")').prependTo('#content');
});

This works fine, but .contains() is case sensitive.

How can I make it case insenstive?

I found this on the net:

http://bugs.jquery.com/ticket/278#comment:4

http://ericphan.info/blog/2009/3/4/jquery-13-case-insensitive-contains.html

but when I add the following code:

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

nothing seems to change and my search box remains case sensitive...

score 2 · Accepted Answer · answered Dec 09 '11 at 20:58

2

After extending $ to add containsIgnoreCase you should use containsIgnoreCase in your code. Try this.

$(document).ready(function(){
    $('input[name="search"]').keydown(function(){
    $('tr.item:containsIgnoreCase("' + $(this).val()+ '")').prependTo('#content');
});

answered Dec 09 '11 at 20:58

ShankarSangoli

69,612
13
93
124

Thanks a lot! This works great! Sorry if my question was too trivial, but I've never used jQuery extensions. I simply thought the original .contains() function would get overwritten by the extenstion. That was my mistake. – lukeshek Dec 09 '11 at 22:35

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

you can find your answer in this post How do I make jQuery Contains case insensitive, including jQuery 1.8+?. For ease i will copy paste the solution for you here,

use

jQuery.expr[':'].Contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

edited May 23 '17 at 11:55

Community

1
1

answered Dec 09 '11 at 21:01

Kamran Ali

5,904
2
26
36

Simple case insensitive search box for a table with jQuery

2 Answers2