Search Through a list By jquery (with case insensitive)

Question

I am trying to search through the list by search box. This is my HTML:

<input type="text" id="query" value=""/>
<ol id="abbreviations" >
<li>Cars</li>
<li>bars</li>
.
.

<ol>

And this is the jQuery code I have:

<script>

var abbrs = {};

$('ol#abbreviations li').each(function(i){
    abbrs[this.firstChild.nodeValue] = i;
});

$('#query').focus().keyup(function(e){
    if(this.value.length >= 2){
        $('ol#abbreviations li').hide();
        var filterBy = this.value;
        for (var abbr in abbrs) {
            if (abbr.indexOf(filterBy) !== -1) {
               var li = abbrs[abbr];
               $('ol#abbreviations li:eq('+li+')').show();
            }
        }       
    } else {
        $('ol#abbreviations li').show();    
    }
    if(e.keyCode == 13) {
        $(this).val('');
        $('ol#abbreviations li').show();
    }   
});
</script>

My code is working perfectly, but it's case sensitive. For example if I type "Cars" it will filter the list, but if I type "cars" it doesn't work. So how can I make this jQuery search insesitive? I tried to changing var filterBy = this.value.toLowerCase();, but it won't match upper case letters. How can I make it work?

Thanks for the hint :) @JakubMichálek +1 , i made it working :) — Vishnu, Sep 29 '13 at 14:06

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

You need to convert to lowercase both the filterValue and abbr:

var filterBy = this.value.toLowerCase();
...
if (abbr.toLowerCase().indexOf(filterBy) !== -1) {
...

Also see this SO question

edited May 23 '17 at 11:56

Community

1
1

answered Sep 29 '13 at 14:02

Shimon Rachlenko

5,289
37
49

Search Through a list By jquery (with case insensitive)

1 Answers1