郵便番号から住所補完zip2addrサンプル

Google日本語入力APIを利用し、完全にメンテナンスフリーな住所補完機能を提供します。
フロントエンドのJavaScriptのみで作動するため、サーバーサイドに手を加える必要はありません。
数行のJavaScriptを書くだけで簡単に既存のフォームに実装できます。
こちらからどうぞー: https://github.com/kotarok/jQuery.zip2addr
クリックによる住所入力対応版: https://github.com/dounokouno/jQuery.zip2addr/tree/with_click

jQueryとzip2addrの読み込み

下記のようにjQueryとzip2addrを読み込んでおきます。これで準備は完了。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.zip2addr.js"></script>

シンプルなケース

郵便番号
住所

$('#zip').zip2addr({
	addr:'#addr'
});

都道府県が別フィールドの場合

郵便番号
住所

$('#zip2').zip2addr({
	pref:'#pref2',
	addr:'#addr2'
})

都道府県がselect要素の場合

郵便番号
住所

$('#zip3').zip2addr({
	pref:'#pref3',
	addr:'#addr3'
})

郵便番号フィールドが別れている場合

郵便番号: -
住所

$('#zip4-1').zip2addr({
	zip2:'#zip4-2',
	addr:'#addr4'
})

郵便番号フィールドも住所フィールドも別れている場合

郵便番号: -
住所

$('#zip5-1').zip2addr({
	zip2:'#zip5-2',
	pref:'#pref5',
	addr:'#addr5'
})

シンプルなケース（ボタンクリック）

郵便番号
住所

$('#zip6').zip2addr({
	addr:'#addr6',
	btn:'#btn6'
});

都道府県が別フィールドの場合（ボタンクリック）

郵便番号
住所

$('#zip7').zip2addr({
	pref:'#pref7',
	addr:'#addr7',
	btn:'#btn7'
})

都道府県がselect要素の場合（ボタンクリック）

郵便番号
住所

$('#zip8').zip2addr({
	pref:'#pref8',
	addr:'#addr8',
	btn:'#btn8'
})

郵便番号フィールドが別れている場合（ボタンクリック）

郵便番号: -
住所

$('#zip9-1').zip2addr({
	zip2:'#zip9-2',
	addr:'#addr9',
	btn:'#btn9'
})

郵便番号フィールドも住所フィールドも別れている場合（ボタンクリック）

郵便番号: -
住所

$('#zip10-1').zip2addr({
	zip2:'#zip10-2',
	pref:'#pref10',
	addr:'#addr10',
	btn:'#btn10'
})