郵便番号による住所検索

やりたいこと

• 郵便番号を入力して住所を検索したい

使用したAPI

• on( events [, selector] [, data], handler(eventObject))
  • マッチした要素に任意のイベントをバインドします。
• match
  • 文字列中で一致するものを検索する String のメソッド。
  • 結果情報の配列を返します。
  • マッチしない場合は null を返します。
• jQuery.ajax
  • HTTP通信でページを読み込みます。

正規表現

• ^
  • 入力の先頭にマッチします。
• $
  • 入力の末尾にマッチします。
• \d
  • 数字にマッチします。
  • [0-9] と同等です。
• {n}
  • n には正の整数が入ります。
  • 直前の文字がちょうど n 回出現するものにマッチします。

ソース

.html

<h1>郵便番号検索</h1>
<p>
  <span class="label">〒</span>
  <input type="text" id="zipcode1" name="zipcode1" size="3" maxlength="3">
  <span>-</span>
  <input type="text" id="zipcode2" name="zipcode2" size="4" maxlength="4">
</p>

.js

$(function() {
	   
	var lookup = function() {
		var z1 = $("#zipcode1").val();
	    var z2 = $("#zipcode2").val();
	    if (!z1.match(/^\d{3}$/) || !z2.match(/^\d{4}$/)) {
	      return;
		}
		$.ajax({
			url: "http://api.aoikujira.com/zip/json/" + z1 + z2,
			type: "GET",
			dataType: "json",
			success: function(res) {
				$("#address").val(res.state + res.city + res.address);
			},
			error: function(xhr, textStatus, errorThrown) {
				alert('Error!');
			}
		});
	};
	   
	$("#zipcode1").on("keyup", lookup);
	$("#zipcode2").on("keyup", lookup);
});