根据数组检查值

Question

I'm creating my own tagging "thingy" which will function similar to Stack Overflow's.

However, my tags require me to check against two categories(arrays), AmericanCodes and CanadianCodes . If the tag does not exist in either of the two arrays, I need to deal with it differently.

Everything seems to be working fine, with the exception of my $.inArray functionality.

It is acting as if it is found in the first array every time. (You'll see what i mean when you view the Fiddle)

Here is my code: Fiddle link below

$(document).ready(function () {
    var AmericanCodes = ["AA", "AB", "AC", "AD", "AE", "AF"]; // Known american conversion codes
    var CanadianCodes = ["CA", "CB", "CC", "CD", "CE", "CF"]; // Known canadian conversion codes
    var UnknownCodes = []; // Collects Unrecognized Codes
    var Entry = $("input#RecessiveCodes"); // Set Input
    $(Entry).keypress(function (e) { // 
        if (e.keyCode == 32) { // This is the enter key
            var EntryValue = $(Entry).val(); // Get Input
            console.log(EntryValue);
            if ($.inArray(EntryValue, AmericanCodes) < 0) { // Check if it's an american code
                $("ul#EnteredCodes").append("<li class='AR'>", EntryValue, "</li>") // Style knowns slightly different than unkown
            } else if ($.inArray(EntryValue, CanadianCodes) < 0) { // Check if it's an canadian code
                $("ul#EnteredCodes").append("<li class='CR'>", EntryValue, "</li>") // Style knowns slightly different than unkown
            } else {
                UnknownCodes.push($(EntryValue)); //Add to list but store unknown reccessive seperatley
                $("ul#EnteredCodes").append("<li class='UR'>", EntryValue, "</li>") // Style unknowns slightly different
            }
            $(Entry).val("");
        }
    });
});

jsFiddle

Answer 1

jQuery.inArray(...) returns -1 if the value doesn't appear in the array.

So:

if ($.inArray(EntryValue, AmericanCodes) < 0)

only matches if EntryValue does not exist in AmericanCodes .

• Try >= 0 instead.

Couple of other things (maybe just from making the JSFiddle too quickly!):

• You've put the CSS as li.AR three times, instead of li.AR , li.CR and li.UR .

• e.keyCode == 32 checks for the space key, not enter !

• If you are using space not enter , your $(Entry).val("") at the end of the function won't work because the keypress event is called BEFORE the most recently typed character was pressed, so the space key will be applied AFTER the text field is emptied. You probably want to use keyup , which is called after the keypress, but then remember to use trimRight() to remove the space character from the input before passing it to $.inArray .

• Event is already a jQuery object, so wrapping it as $(Event) is redundant and just wastes a few cycles.

Working JSFiddle with all these changes: here