Jquery检查数组执行函数

Question

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

我该怎么做？非常感谢提前。

Answer 1

这是一种方法：

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文档：

.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代码时，通常最好在文档加载后运行代码。你可以用不同的方式做到这一点。

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

或

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

这两个人将完成同样的事情。

我更新了我的答案以包含第二个版本。

---

<强>奖金：

如果用户为前两个字符键入小写字符，此版本将使用大写版本更新输入。

编辑：此外，如果找不到数组中的匹配项，则会显示失败消息。

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

我想如果你让一些服务器端演员参与到这一集中，那将是最好的。

做类似的事情：

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

您可以将所有代码存储在数据库中，然后使用您在json调用中获得的参数查询数据库，并在服务器上制作消息并将其发送到UI。