CODEWITHSUNDEEP
jqueryif-statementselector
Ila
Ila

Reputation: 3538

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

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/

Upvotes: 1

Views: 2072

Answers (2)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

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/

Upvotes: 2

Denys Séguret
Denys Séguret

Reputation: 382150

You can do

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

Upvotes: 4

Related Questions