Jquery check array perform function

Question

I am creating a site that requires a very small postcode checker. I have approx 8 postcode prefix's, HX, HD, BD, LS etc in an array. I also have a simple input field and submit btn. When the user types in a postcode for example HX5 9DU I want Jquery to check the array, if there is match for the first 2/3 letters I want a div to fade in displaying a message.

How would I do this? Many thanks in advance.

Answer 1

Here's one way to do it:

http://jsfiddle.net/uNKhs/3/

HTML:

<div id="message">some message</div>

<input type="text" id="myInput" />​

jQuery:

$(function() {  // Wrap the code such that it will run after document loads

    $("#message").hide();   // First hide the message

    var prefix = ['HX', 'HD', 'BD', 'LS'];   // Create your array of prefixes

    $('#myInput').keyup(function(e) {   // Trigger an event handler on each 'keyup'

        var value = $(this).val();   // Grab the current value of the input

            // Store first two characters in a variable, and convert to upper case
        var firstTwo = value.substr(0,2).toUpperCase();


             // Check that the length of the input is greater than one,
             //    and that the firstTwo characters are in the prefix array
        if(value.length > 1 && ($.inArray(firstTwo, prefix) >= 0)) {

                // If so, find the hidden element with ID "message" and fade it in.
            $("#message:hidden").fadeIn();
        }
    });

});

---

Some related jQuery docs:

.hide() http://api.jquery.com/hide/

$.inArray() http://api.jquery.com/jQuery.inArray/

.fadeIn() http://api.jquery.com/fadein/

.keyup() http://api.jquery.com/keyup/

.val() http://api.jquery.com/val/

---

EDIT:

When running jQuery code, it is usually best to have your code run after the document has loaded. You can do this a couple different ways.

$(document).ready(function() {
    // My jQuery code
});

or

$(function() {
    // My jQuery code
});

The two will accomplish the same thing.

I updated my answer to include the second version.

---

BONUS:

This version will update the input with the upper case version if the user types lower case characters for the first two characters.

EDIT: Also, it shows a fail message if a match in the array is not found.

http://jsfiddle.net/uNKhs/8/

$(function() {
    $("#message").hide();
    $("#fail").hide();

    var prefix = ['HX', 'HD', 'BD', 'LS']

    $('#myInput').keyup(function(e) {
        var value = $(this).val();
        var firstTwo = value.substr(0,2);
        var firstTwoUpper = firstTwo.toUpperCase();

        if(firstTwo != firstTwoUpper) {
            $(this).val( value.replace(/^\w\w/, firstTwoUpper) );
        }
        if(value.length > 1) {
            if($.inArray(firstTwoUpper, prefix) >= 0) {
                $("#fail").hide();
                $("#message:hidden").fadeIn();
            } else {
                $("#message").hide();
                $("#fail:hidden").fadeIn();
            }
        } else {
            $("#message").hide();
            $("#fail").hide();
        }
    });
});
​

Answer 2

I guess it would be best if you involve some serverside actors to this episode.

Doing something like:

$.getJSON('/CheckPrefix', { query = $('#prefixInpunt').val() }, function(responseMsg) {
    $('#messageDiv').show().html(responseMsg);
})

You can store all your codes in a db, then just query the db with the param you get in the json call and craft the message on your server and send it to the UI.