住所の単語から郵便番号を検索してその住所を表示する

ホーム > Postal Search Ajax API サンプル > ベーシック

Postal.Coder クラスを使って、指定した住所の単語から郵便番号を検索し、その結果をリスト表示します。さらに Postal.Lookup クラスを使って、その郵便番号から住所を検索し、その結果を表示します。

<script type="text/javascript">
//<![CDATA[

// window.onload
window.onload = function() {
  run(document.f.a.value, document.f.l.value);
}

// run
function run(a, limit) {
  var coder = new Postal.Coder();
  coder.onload = function() {
    var ul = document.getElementById('r');
    ul.innerHTML = '';
    for (var i=0; i<coder.response.length; i++) {
      if (i>=limit)
        break;
      var addr = coder.response[i];
      var li = document.createElement('li');
      li.className = 'indicator';
      li.appendChild(document.createTextNode(
        addr.c
      ));
      ul.appendChild(li);
      
      // lookup
      lookup(addr.c, li);
    }
  };
  coder.send(a);
}

// lookup
function lookup(c, element) {
  var lookup = new Postal.Lookup({ timeout: 60 });
  lookup.onload = function() {
    if (lookup.response.length >= 1) {
      var addr = lookup.response[0];
      element.className = '';
      element.innerHTML = '';
      element.appendChild(document.createTextNode(
        addr.c + ' ' + addr.a
      ));
    }
  };
  lookup.send(c);
}

//]]>
</script>

<form name="f"
  onsubmit="run(this.a.value, this.l.value); return false;"
>
<input type="text" name="a" value="横浜" />
<select name="l">
<option value="1">1件</option>
<option value="2">2件</option>
<option value="3" selected="selected">3件</option>
<option value="4">4件</option>
<option value="5">5件</option>
<option value="6">6件</option>
<option value="7">7件</option>
<option value="8">8件</option>
<option value="9">9件</option>
<option value="10">10件</option>
</select>
<input type="submit" name="g" value="go" />
</form>

<ul id="r"></ul>

住所の単語から郵便番号を検索してその住所を表示する

関連情報