classを入れるだけで郵便番号検索ができるYubinbangoの使い方

郵便番号検索がclassを入れるだけで実装できるYubinbangoの使い方です。

設置方法

配布元:Yubinbango(Github)

配布元から該当データをダウンロードし、ヘッダーで以下を読み込みます。

<script src="js/yubinbango.js"></script>

form内に以下のコードを入れ、各項目に該当のclassを設置します。

<span class="p-country-name" style="display:none;">Japan</span>
<dl>
	<dt>郵便番号</dt>
	<dd><input type="text" class="p-postal-code" name="" value="" placeholder="例:4640850"></dd>
</dl>
<dl>
	<dt>住所</dt>
	<dd><input type="text" class="p-region p-locality p-street-address p-extended-address" name="" value="" placeholder="例:愛知県名古屋市千種区"></dd>
</dl>

欄が分かれていても設置可能です。

<dl>
	<dt>郵便番号</dt>
	<dd><input type="text" class="p-postal-code" name="" value="" placeholder="例:464"> - <input type="text" class="p-postal-code" name="" value="" placeholder="例:0850"></dd>
</dl>
<dl>
	<dt>住所</dt>
	<dd><input type="text" class="p-region " name="" value="" placeholder="例:愛知県"><input type="text" class="p-locality" name="" value="" placeholder="例:名古屋市千種区"><input type="text" class="p-street-address" name="" value="" placeholder="例:今池"></dd><input type="text" class="p-extended-address" name="" value="" placeholder="例:以降の住所">
</dl>

詳しくは配布元でご確認ください。
配布元:Yubinbango(Github)