jQuery检查数组执行功能 [英] Jquery check array perform function

问题描述

我正在创建一个需要非常小的邮政编码检查器的站点.我在阵列中大约有8个邮政编码前缀，HX，HD，BD，LS等.我也有一个简单的输入字段并提交btn.当用户输入邮政编码，例如HX5 9DU时，我希望Jquery检查数组，如果前2/3个字母匹配，我希望div淡入显示一条消息.

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.

推荐答案

这里是一种方法:

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

});

---

一些相关的jQuery文档:

---

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/

在运行jQuery代码时，通常最好在文档加载后运行代码.您可以通过几种不同的方法来做到这一点.

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

或

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

两者将完成同一件事.

The two will accomplish the same thing.

我将答案更新为包含第二个版本.

I updated my answer to include the second version.

奖励:

如果用户在前两个字符中输入小写字母，则此版本将使用大写字母更新输入.

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

另外，如果未在数组中找到匹配项，则会显示一条失败消息.

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

这篇关于jQuery检查数组执行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！