ど素人から毛を生やす。<延>

jquery.jpostal.jsを使って郵便番号から住所を検索する

Web > javascript 2015年6月10日(最終更新:2年前)

このページは2015.6.10に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

フォームメールを設置するとき、郵便番号や住所を入力する欄があることがあります。
郵便番号を入力したら自動的に住所が表示されると親切で良いですね。

というわけで、その方法です。

 

使用するjsは「jquery.jpostal.js」というものです。

<script src="/js/jquery-1.11.1.min.js"></script>
<script src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

head内でjQueryと一緒に読み込みます。

<script>
$(window).ready( function() {
	$('#yuubin').jpostal({
		click : '#yuubinButton',
		postcode : [
			'#yuubin'
		],
		address : {
			'#address01'  : '%3',
			'#address02'  : '%4%5'
		}
	});
});
</script>

そして、こんな感じの記述をします。
意味は以下の通り。

<script>
$(window).ready( function() {
	$('郵便番号のテキストボックス').jpostal({
		click : '検索ボタン',
		postcode : [
			'郵便番号のテキストボックス'
		],
		address : {
			'都道府県を表示するテキストボックス' : '%3',
			'市区郡を表示するテキストボックス' : '%4',
			'町域を表示するテキストボックス' : '%5',
			'大口事務所の番地を表示するテキストボックス' : '%6',
			'大口事務所の名称を表示するテキストボックス' : '%7',
			'都道府県(半角フリガナ)を表示するテキストボックス' : '%8',
			'市区郡(半角フリガナ)を表示するテキストボックス' : '%9',
			'町域(半角フリガナ)を表示するテキストボックス' : '%10'
		}
	});
});
</script>

必要なもののみを記述し、繋げて表示する場合は「%4%5」というように、こちらの記述も繋げて書けばおk。

「click」の行を無くすと、ボタンなしで逐次反映。
一手間省けるのは確かですが、個人的にはボタン有りの方が分かりやすくて親切なんじゃないかなーと思います。

「000」-「0000」みたいな感じで郵便番号の入力欄が2つあるなら、

		postcode : [
			'郵便番号のテキストボックス'
		],

この部分を、

		postcode : [
			'郵便番号のテキストボックス1',
			'郵便番号のテキストボックス2'
		],

と変更するだけ。
超簡単。
3行目の郵便番号のテキストボックスについては、最初の1つを書いておけば良いようです。

世の中には便利なものが出回ってますね。

基本的な設置方法について書きましたが、もっと詳しく知りたい場合は配布元のサイトを見てみると良いと思います。
Googleのサイトですが、解説は日本語で結構丁寧です。
配布元サイトはこちら

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)