ryouhei-kawauchi / jquery.jpostal.js Goto Github PK

jquery.jpostal.js
=================
Copyright 2014, Aoki Makoto, Ninton G.K. http://www.ninton.co.jp

Released under the MIT license - http://en.wikipedia.org/wiki/MIT_License

Requirements
jquery.js

郵便番号を入力すると住所欄へ自動入力するjQueryプラグインです。
jpostal-1006.appspot.comで公開していますので、jquery.jpostal.jsやjson/*.jsonを設置する必要がありません。
サイト運営者の定期的な郵便データ更新作業も必要ありません。

都道府県をSELECTタグで表示する場合、OPTIONタグのvalueは次のどれでもかまいません。
<option value="北海道">北海道</option>
<option value="1">北海道</option>
<option value="01">北海道</option>

--------------------------------------------------
使用例
--------------------------------------------------
(sample_1.html)

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
	$('#postcode1').jpostal({
		postcode : [
			'#postcode1',
			'#postcode2'
		],
		address : {
			'#address1'  : '%3',
			'#address2'  : '%4',
			'#address3'  : '%5'
		}
	});
});

--------------------------------------------------
設置方法A
--------------------------------------------------
1. 住所入力フォームにjquery本体とjquery.jpostal.jsをインクルードしてください。

  例
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

2. jpostalプラグイン呼び出しを記述してください。

2-1. .jpostalを指定するセレクタ

$('#postcode1').jpostal({

	郵便番号欄のセレクタを指定してください。
	郵便番号欄が2個の場合は、最初の1個だけを指定してください。
	DOM idを設定していたほうが指定が簡単です。

	例1
	<input id="postcode1_1" name="postcode1" />
	$('#postcode1_1').jpostal({

	例2
	DOM idなしの場合
	<input name="postcode1" />
	$('[name=postcode1]').jpostal({

2-2. 引数

postcode	郵便番号欄
	郵便番号欄セレクタの配列
	
	例1
	郵便番号欄が1個
	postcode : [
		'#postcode'
	]

	例2
	郵便番号欄が2個
	postcode : [
		'#postcode1',
		'#postcode2'
	]
			
address		住所欄
	住所欄セレクタと入力項目フォーマットの連想配列

	入力項目フォーマット
	%3	都道府県
	%4	市区町村
	%5	町域
	%6	大口事業所の番地
	%7	大口事業所の名称
	%8	都道府県カナ
	%9	市区町村カナ
	%10	町域カナ(予定)
	
	例1
	都道府県欄、住所欄の2個
	address : {
		'#prefecture'  : '%3',
		'#address'     : '%4%5',
	}

	例2
	都道府県欄、住所欄、番地欄の3個
	address : {
		'#prefecture'  : '%3',
		'#address1'    : '%4',
		'#address2'    : '%5',
	}

--------------------------------------------------
設置方法B
ご自分のサーバに郵便データを設置する場合
--------------------------------------------------
1. jquery.jpostal.jsをサーバに設置してください。

  アップロード先は任意です。
  htmlフォームと違うサーバも可能です。
  アップロード先の例1  js/jpostal/jquery.jpostal.js
  アップロード先の例2  js/jquery.jpostal.js
  
2. json/*.json をサーバにアップロードしてください。

  アップロード先は任意です。
  jquery.jpostal.jsとの相対関係はありません。
  htmlフォーム、jquery.jpostal.jsと違うサーバでもかまいません。
  アップロード先の例1  js/jpostal/json/*.json
  アップロード先の例2  js/json/*.json

3. 住所入力フォームにjquery本体とjquery.jpostal.jsをインクルードしてください。

  例
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.jpostal.js"></script>

4. jpostalプラグイン呼び出しを記述してください。

4-1. .jpostalを指定するセレクタ

$('#postcode1').jpostal({

	郵便番号欄のセレクタを指定してください。
	郵便番号欄が2個の場合は、最初の1個だけを指定してください。
	DOM idを設定していたほうが指定が簡単です。

	例1
	<input id="postcode1_1" name="postcode1" />
	$('#postcode1_1').jpostal({

	例2
	DOM idなしの場合
	<input name="postcode1" />
	$('[name=postcode1]').jpostal({

4-2. 引数

postcode	郵便番号欄
	郵便番号欄セレクタの配列
	
	例1
	郵便番号欄が1個
	postcode : [
		'#postcode'
	]

	例2
	郵便番号欄が2個
	postcode : [
		'#postcode1',
		'#postcode2'
	]
			
address		住所欄
	住所欄セレクタと入力項目フォーマットの連想配列

	入力項目フォーマット
	%3	都道府県
	%4	市区町村
	%5	町域
	%6	大口事業所の番地
	%7	大口事業所の名称
	%8	都道府県カナ
	%9	市区町村カナ
	%10	町域カナ(予定)
	
	例1
	都道府県欄、住所欄の2個
	address : {
		'#prefecture'  : '%3',
		'#address'     : '%4%5',
	}

	例2
	都道府県欄、住所欄、番地欄の3個
	address : {
		'#prefecture'  : '%3',
		'#address1'    : '%4',
		'#address2'    : '%5',
	}

url		json/*.jsonのURL
	住所フォームからjson/*.jsonへの相対URLまたは絶対URL。
	http用、https用を指定してください。

	例1
	url : {
		'http'  : 'json/',
		'https' : 'json/'
	}

	例2
	url : {
		'http'  : 'http://www.example.jp/json/',
		'https' : 'https://ssl.example.jp/mysite/json/'
	}

	例3
	http、https どちらも同じホストとパスの場合
	url : {
		'http'  : '//www.example.jp/json/',
		'https' : '//www.example.jp/json/'
	}