CODEWITHSUNDEEP
jqueryhtmlinputuppercaselowercase
MOTIVECODEX
MOTIVECODEX

Reputation: 2752

HTML input search doesn't find uppercase vise versa

This code doesn't find UPPERCASE if searched for with lowercase uppercase vise versa same for lowercase, if searched for LOWERCASE. I was thinking of making the input and data-label to lowercase with jquery before searching, but how?

jsfiddle code here

Can someone help, thanks

Upvotes: 2

Views: 160

Answers (3)

Yogu
Yogu

Reputation: 9455

Replace line 14 by this:

var matched = $("ul li").filter(function() { return $(this).data('label').toLowerCase().indexOf(input.toLowerCase()) >= 0; });

And change the show()/hide() logic:

$('ul li').hide();
matched.show();
matched = matched.length;

Complete fiddle

This also eliminates the problem of someone entering ] or some other special character - that would break the CSS rule in your code.

Upvotes: 2

Manoj Yadav
Manoj Yadav

Reputation: 6612

Use toLowerCase() and $.each Updated js fiddle code

Upvotes: 1

000
000

Reputation: 27247

Here's an updated fiddle for you http://jsfiddle.net/jdmTZ/5/

Remove the data attribute and add it in code:

            $('.filter li').each(function() {
                $(this).attr('data-label', $(this).text().toLowerCase());
            });

Then search by lowercased input

                var input = $(this).val().toLowerCase();

Upvotes: 4

Related Questions