JavaScriptプログラムに関する各種メモ書き

JavaScript(jQuery) で郵便番号から住所を自動入力する2つのライブラリ

■ 1.【 jQueryプラグイン jquery.jpostal.js】

設置が簡単なのでおすすめです。住所データも自動更新。

https://github.com/ninton/jquery.jpostal.js

ライブラリの読み込み

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

スクリプトの実行

$('#postcode1').jpostal({
    postcode : [
        '#postcode1', // 郵便番号 前3桁
        '#postcode2' // 郵便番号 後4桁
    ],
    address : {
        '#address1'  : '%3', // 都道府県
        '#address2'  : '%4', //住所1
        '#address3'  : '%5' // 住所2
    }
});

です。とても簡単ですね。


■ 2. 【ajaxzip3】

郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。

https://github.com/ajaxzip3/ajaxzip3.github.io

ライブラリの読み込み

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

郵便番号入力欄に追加

正規表現で郵便番号が7桁入力された時に検索を実行するようにします。

【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると

【name=prefecture】のドロップダウンリスト

【name=address】の1行テキストに住所が反映されます。

■ HTMLの1行テキストを下記のように修正

<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />

■ HTMLの<head>タグ内に下記を追加(.js ファイルにして外に出してもok)

<script>
var postal_name = '';
function check_zip( _this ){
    if ( postal_name != _this.value ){
        AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
        postal_name = _this.value;
    }
}
</script>

これだけです。


関連エントリー

No.870
07/14 13:50

edit

jQuery