住所の単語から住所の候補をサジェスト表示する #3

ホーム > Postal Search Ajax API サンプル > with jQuery

jQuery coder プラグインを使って、テキストボックスを拡張して、住所の入力を支援できます。いわゆるサジェストと呼ばれるものです。Google サジェストや gooサジェストβ with ATOK は、検索キーワードの入力を支援しますが、jQuery coder プラグインは、住所の入力を支援します。

テキストボックスに住所の単語を入力すると、その単語を含む住所を検索し、その結果を入力候補としてリスト表示します。入力候補を選択すると、その住所をテキストボックスに設定します。入力候補の選択は、マウスのほかにキーボードも使えます。

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#a1').codable();
});
//]]>
</script>

入力候補を選択したときのイベントをハンドリングする

コールバック関数を指定すると、入力候補を選択したときのイベントをハンドリングできます。次の例では、入力候補を選択したとき、住所の郵便番号とフリガナをテキストボックスに設定しています。

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#a2').codable(function(addr) {
     this.form.c.value = addr.c;
     this.form.k.value = addr.k;
  });
});
//]]>
</script>

リスト表示する入力候補の件数を指定する

リスト表示する入力候補の件数を指定できます。次の例では、入力候補の件数に5件を指定しています。初期値は3件です。

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#a3').codable(5);
});
//]]>
</script>

Google Map を使って選択した入力候補の位置を表示する

次の例では、入力候補を選択したとき、コールバック関数の中で、住所の緯度経度を中心とした地図を表示しています。また、リスト表示する入力候補の件数に5件を指定しています。

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  var map = new GMap2($('#map')[0]);
  map.setCenter(new GLatLng(Japan.Tokyo.y, Japan.Tokyo.x), 15);

  $('#a4').codable(function(addr) {
    map.panTo(new GLatLng(addr.y, addr.x));
  }, 5);
});
//]]>
</script>

Postal Search Ajax API のプログラムやデータベースは、すべて JavaScript で構成しているため、入力候補を素早く表示できない欠点があります。ですが、住所の入力支援を Ajax API や Ajax API 構築キットというプログラミングできる形で公開することで、何か特定の用途に応用できることもあるのではないかと期待しています。

住所

住所
〒
フリガナ

住所

住所