jquery：change(func)

このイベントの説明

jQueryの change(func) は<input><textarea><select>タグからカーソルが出たイベントを検知した時の処理を実行します。

構文

セレクタ.change(function(){イベントが発生した時の処理})

郵便番号から住所を検索する仕組み

郵便番号から住所を検索する方法には色々な物がありますが、ここでは株式会社アイビス社が提供している『zipcloud』の郵便番号検索APIを使った事例を解説していきます。

このAPIは、jQueryのajax通信で指定されたURLに郵便番号を送ると下記の様なデータを返してくれるサービスです。

詳しくは 郵便番号検索API を参照して下さい。

利用例

①郵便番号から住所を検索する。

郵便番号(7桁の数字又は3桁数字-4桁数字)を入力後、tabキー又は住所をクリックして下さい。

ajaxが動き住所を検索してくれます。

該当する郵便番号がない場合はエラーメッセージが表示されます。

これも試してみて下さい。

上記は下記のプログラムから構成されています。

<p>郵便番号：<input type='text' name='post_number' class='post_number' maxlength='8'  placeholder='xxx-xxxx' style='width:8em;'  autocomplete='off' ></p>
<p class='post_check' style='color:red;'></p> 
<p>住所：<input type='text'  name='address' class='address' style='width:100%;margin-top:10px;' autocomplete='off'></p>
<script>	
	$(function(){
		$('.post_number').change(function(){
			$.ajax({
				url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('.post_number').val(),
				dataType : 'jsonp',
			}).done(function(data) {
				if (data.results) {
					var address1 = data.results[0].address1 + data.results[0].address2 + data.results[0].address3;
					var message = '『' + address1 + '』　の番地及びマンション名等を入力してください。'; 
					var address2 = window.prompt( message );
					if(address2 != null){$('.address').val(address1 + address2);}
					$('.post_check').text('');
				} else {
					$('.post_check').text('この番号の住所はありません。郵便番号を再確信して下さい');
					$('.address').val('');
				}
			});
		});
	});
</script>

■1行目～3行目：HTML

1行目と3行目のinputフィールドはautocomplete='off'を指定してオートコンプリート機能をOFFにしています。

オートコンプリートについては イベント.mousedown(func) を参照して下さい。

■5行目から

ajax通信で『zipcloud』の郵便番号検索APIを検索する部分です。

取得しているデータはaddress1、address2、address3です。

参考情報

その他の イベント発生のメソッド も参照してください。