Non-case-sensitive comparison of text input value with JQuery

Question

I have looked through the answers relating to writing custom selectors in JQuery (such as this one: Writing jQuery selector case-insensitive version) but am still unclear on if a custom selector is the best approach to my problem.

I want to take input from a text box and compare it to a list of known terms. I want the comparison to be case insensitive. Here is what I am trying to do:

 $('#query').change(function() { if ($("#query").val() == "kittens") { $('#change').text("kittens") } else if ($("#query").val() == "puppies") { $('#change').text("puppies") } else { $('#change').text("neither kittens nor puppies") } });

Here is a JSFiddle: http://jsfiddle.net/XcbMQ/

I want "kittens" and "Kittens" and "KITTENS" to all match the kitten condition. I am not clear that a custom selector is the best way to do this, or if I can use .is() or similar. If a custom selector is the best way to do it, how/where do I integrate that into my code?

UPDATE:

Here is a JSFiddle with the working code, thanks to dystroy: http://jsfiddle.net/XcbMQ/2/

Denys Séguret · Accepted Answer · 2013-05-02 12:12:43Z

4

You can do

if ($("#query").val().toLowerCase() == "kittens") {

answered May 2, 2013 at 12:12

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kazekage Gaara Over a year ago

or toUpperCase() as mentioned by @David Hedlund

Ila Over a year ago

Thanks for the demonstration of where to add the .toLowerCase() to my code, made it very simple to get it working.

Reinstate Monica Cellio · Accepted Answer · 2013-05-02 12:19:18Z

Here's a version that uses switch instead of multiple if statements. Does the same job but is a bit tidier...

$('#change').text("nothing entered yet") $('#query').change(function() { var text = $(this).val().toLowerCase(); switch (text) { case "kittens": $('#change').text("kittens"); break; case "puppies": $('#change').text("puppies"); break; default: $('#change').text("neither kittens nor puppies"); break; } });

Here's an updated fiddle...

http://jsfiddle.net/XcbMQ/3/

Collectives™ on Stack Overflow

Non-case-sensitive comparison of text input value with JQuery

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related