【Javascript】郵便番号から住所を自動入力する方法

6236 ワード
JavaScript jQuery JavaScript テキストリンク

成果物


郵便番号を入力することで住所をある程度自動で入力できるものを作ったので
そのアウトプットです。(100-0000と入力しても自動入力可能です。)

環境

・Windows10
・Visual Studio Code
・jQuery
・zip cloud

zip cloudとは？

公式サイトの概要よると、
日本郵便のWebサイトで公開されている郵便番号データを再配信するサービスです。
Web APIをたたくと以下のようなJSONで返してくれます。

{
    "message": null,
    "results": [
        {
            "address1": "東京都",
            "address2": "千代田区",
            "address3": "",
            "kana1": "ﾄｳｷｮｳﾄ",
            "kana2": "ﾁﾖﾀﾞｸ",
            "kana3": "",
            "prefcode": "13",
            "zipcode": "1000000"
        }
    ],
    "status": 200
}

コード

zip cloudから得られるJSONを利用して成果物のコーディングをすると…

index.html
    <body>
        <form>
            <div>
                <label for="zip">郵便番号：</label><br>
                <input id="zip" type="text" size="10">
            </div>
            <div>
                <label for="address">住所：</label><br>
                <input id="address" type="text" size="35">
            </div>
        </form>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(function () {

                //郵便番号の入力時に実行
                $('#zip').change(function () {

                    //WEB API取得
                    $.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?',
                        {
                            zipcode:$('#zip').val()
                        }
                    )
                    //結果を取得してからの処理
                    .done(function (data) {
                        //中身が空でなければその値を住所欄に反映
                        if (data.results) {
                            var result = data.results[0];
                            $('#address').val(result.address1 + result.address2 + result.address3);
                        } else {
                            $('#address').val('該当する住所が存在しません。')
                        }
                    })
                });
            });

        </script>
    </body>

Javascriptってすごいなー（小物感）