web-dev-qa-db-ja.com

住所フィールドモジュールは、郵便番号が入力されたときに市と州を自動入力します

米国では、都市は一意の5桁の郵便番号（郵便番号）で分割されています。次に、この郵便番号は、その市と州を示しています。したがって、都市と州を入力することは冗長です。

Address Field モジュールを使用して、郵便番号が送信された場合に都市と州を自動入力する方法はありますか？

次に、これは2番目の質問、正しい郵便番号の入力を強制する方法につながります。デフォルトでは、ユーザーは任意のテキストを入力でき、それが受け入れられます。

7ajaxentities
2
Anon Ymous

次に、zipcodeapi.com APIを使用するJavaScriptコードを示します。

<script type="text/javascript">//<![CDATA[
$(function() {
    // IMPORTANT: Fill in your client key
    var clientKey = "js-9qZHzu2Flc59Eq5rx10JdKERovBlJp3TQ3ApyC4TOa3tA8U7aVRnFwf41RpLgtE7";

    var cache = {};
    var container = $("#example1");
    var errorDiv = container.find("div.text-error");

    /** Handle successful response */
    function handleResp(data)
    {
        // Check for error
        if (data.error_msg)
            errorDiv.text(data.error_msg);
        else if ("city" in data)
        {
            // Set city and state
            container.find("input[name='city']").val(data.city);
            container.find("input[name='state']").val(data.state);
        }
    }

    // Set up event handlers
    container.find("input[name='zipcode']").on("keyup change", function() {
        // Get Zip code
        var zipcode = $(this).val().substring(0, 5);
        if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode))
        {
            // Clear error
            errorDiv.empty();

            // Check cache
            if (zipcode in cache)
            {
                handleResp(cache[zipcode]);
            }
            else
            {
                // Build url
                var url = "http://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians";

                // Make AJAX request
                $.ajax({
                    "url": url,
                    "dataType": "json"
                }).done(function(data) {
                    handleResp(data);

                    // Store in cache
                    cache[zipcode] = data;
                }).fail(function(data) {
                    if (data.responseText && (json = $.parseJSON(data.responseText)))
                    {
                        // Store in cache
                        cache[zipcode] = json;

                        // Check for error
                        if (json.error_msg)
                            errorDiv.text(json.error_msg);
                    }
                    else
                        errorDiv.text('Request failed.');
                });
            }
        }
    }).trigger("change");
});

//]]>

ここに例があります- http://www.zipcodeapi.com/Examples#example1

問題は、最初に郵便番号を入力するユーザーに基づいて有効な都市と州を自動入力する方法なので、上記のJavaScriptコードはそれを行います。上記の例をクリックして、動作を確認してください。

1
Bob Bickel

このために、アドレスフィールドへの依存関係を使用して独自のカスタムモジュールを開発できます。

  1. 郵便番号に基づいて都市と州をJSONで返すサーバー関数を定義する必要があります。
  2. 入力フィールドで変更、キーアップ、入力イベントをサブスクライブします。
  3. AJAXを使用してサーバー関数を呼び出すJavaScript関数を定義します。成功関数では、応答を使用してフィールドを設定します。

支援コード

$("#txtZipCode").bind("change keyup input", function (e) {
        var field = $(this);
        if (field.val().length === 5) {
            showLocation(field.val());
        }
        else
            showLocation("");
    });

function showLocation(zipCodeValue) {
    var txtCity = $("#city");
    var txtState = $("#state");
    if (zipCodeValue.toString().length != 5) {
        txtCity.val("");
        txtState.val("");
    }
    else {
        $.ajax({
            dataType: "json",
            url: "Location/GetZipCode",
            data:
                {
                    zipCodeNumber: zipCodeValue
                },
            success: function (data) {
                    txtCity.val(data.City);
                    txtState.val(data.State);
            }
        });
    }
}
0
Adi

エンティティ参照の自動入力の場合は、この機能を実現するのに役立ちます。これについてはプロジェクトのページにコメントがあります。

Addressfield：Addressfieldをロードするには、追加の処理が必要です。動作させるためのサブモジュールが含まれています。 「エンティティ参照の自動入力アドレスフィールド」を有効にしてください。

私はこれをテストしませんでした、検索中に見つかりました。

これがお役に立てば幸いです。

0
Abin

Lushのこの新しいモジュールをチェックアウトして、その過程でレビューを与えることができます。

住所フィールド検索： https://www.drupal.org/sandbox/danielmrichards/2580615

0
Ryan Szrama