HTML input search doesn't find uppercase vise versa

Question

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

just make a comparison using `toUpperCase()` and `toLowerCase()`....pretty straight forward — Ohgodwhy, Jun 29 '13 at 19:32
I am no jquery Guru ... Could you modify the jsfiddle code so it works? Thanks — MOTIVECODEX, Jun 29 '13 at 19:33
You can find solution here http://stackoverflow.com/questions/5671238/css-selector-case-insensitive-for-attributes — mkutyba, Jun 29 '13 at 19:34

score 4 · Accepted Answer · answered Jun 29 '13 at 19:37

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();

Yogu · Answer 2 · 2013-06-29T19:40:40.950

2

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.

edited Jun 29 '13 at 19:40

answered Jun 29 '13 at 19:35

Yogu

9,165
5
37
58

score 1 · Answer 3 · answered Jun 29 '13 at 19:38

1

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

answered Jun 29 '13 at 19:38

Manoj Yadav

6,560
1
23
21

HTML input search doesn't find uppercase vise versa

3 Answers3