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

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

設置が簡単なのでおすすめです。住所データも自動更新。
https://github.com/ninton/jquery.jpostal.js

ライブラリの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jpostal.js"></script>

スクリプトの実行(郵便番号を入力すると自動でフォームに住所を入力)

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

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

HTMLは次のように準備します。

郵便番号 : <input type="text" name="postcode1" id="postcode1" > - <input type="text" name="postcode2" id="postcode2" > 

都道府県 : <input type="text" name="address1" id="address1" > 
住所1 : <input type="text" name="address2" id="address2" > 
住所2 : <input type="text" name="address3" id="address3" > 

● 「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力する

「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力するには、

<button id="btn_post" type="button">郵便番号から住所を自動入力</button>

というボタンを設置して

  $(document).ready(function() {
    $('#btn_post').jpostal({
      click : '#btn_post',
      postcode : [
        '#zip_code'
      ],
      address : {
        '#prefecture_name': '%3',
        '#addr_name'    : '%4%5'
      }
    });
  });

という風に呼び出します。


● 郵便番号が入力されたときに自動的に全角から半角へ変換する

moji.js を使用して次のようにします。

・moji.js

https://github.com/niwaringo/moji

<script src="./js/moji.js"></script>
<script type="text/javascript">
 $("#zip_code").keyup(function(){
    var str = $(this).val();
    var han = moji(str).convert("ZEtoHE").toString();
    $(this).val(han);
  });
</script>


● 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
02/27 10:13

edit

jQuery
フォーム