Postal Search APIs & Solutions
Postal Search APIs & Solutions
  • チュートリアル
  • ダイジェスト
  • リファレンス
  • デモ
  • テスト
  • 構築キット
  • with Gadgets
  • with jQuery
  • with Microformats
  • よくある質問
  • お問い合わせ
  • 利用規約
  • フォーラム
  • ブログ
Design by
Studio7designs
opensourcetemplates.org
ホーム > Postal Search Ajax API サンプル > with jQuery

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

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 構築キット というプログラミングできる形で公開することで、何か特定の用途に応用できることもあるのではないかと期待しています。

関連情報

ベーシック
  • 郵便番号から住所を検索する
  • 住所の単語から郵便番号を検索する
  • 住所の単語から郵便番号を検索してその住所を表示する
送信フォーム
  • 郵便番号を住所に変換するフォーム
  • 郵便番号を住所とフリガナに変換するフォーム #1
  • 郵便番号を住所とフリガナに変換するフォーム #2
  • 郵便番号を住所に変換し、都道府県を選択するフォーム
  • 郵便番号を住所とフリガナに変換し、都道府県を選択するフォーム
with jQuery
  • 郵便番号から住所を検索する #1
  • 郵便番号から住所を検索する #2
  • 送信フォームの入力形式を郵便番号に制限する
  • 住所の単語から郵便番号を検索する
  • 住所の単語から郵便番号を検索してその住所を表示する
  • 住所の単語から住所の候補をサジェスト表示する #1
  • 住所の単語から住所の候補をサジェスト表示する #2
  • 住所の単語から住所の候補をサジェスト表示する #3
Google Maps API
  • ジオコーダを使って郵便番号の周辺地図を表示する
  • 都道府県の県庁所在地を日本地図に表示する
  • 都道府県を選択してその県庁所在地の周辺地図を表示する
  • ジオコーダを使わずに郵便番号の周辺地図を表示する
BLOGRANGER API
  • 郵便番号の地域に関連するブログを検索する
Copyright© 2007 LEARNING RESOURCE LAB and the Postal Search APIs & Solutions team.