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

送信フォームの入力形式を郵便番号に制限する

jQuery lookup プラグイン の lookupable メソッドを使って、送信フォームの入力形式を郵便番号に制限します。また、郵便番号を入力したというイベントを受け取ることもできます。

ボタンを使って郵便番号から住所を検索する

lookupable メソッドを使って、郵便番号の入力形式を制限します。検索ボタンをクリックすると、lookupTo メソッドを使って、入力した郵便番号から住所を検索し、その住所を送信フォームに表示します。

郵便番号
住所
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#c1').lookupable();
  $('#lookup').click(function() {
    $('#c1').lookupTo('#a1');
  });
});
//]]>
</script>

<form method="get" action="./example.cgi">
<table>
<tr>
<td width="80">郵便番号</td>
<td>
<input id="c1" type="text" name="code" size="10" />
<input id="lookup" type="button" value="検索" />
</td>
</tr><tr>
<td>住所</td>
<td><input id="a1" type="text" name="address" size="60" /></td>
</tr><tr>
<td colspan="2"><input type="submit" value="送信" /></td>
</tr>
</table>
</form>

イベントを使って郵便番号から住所を検索する

lookupable メソッドを使って、郵便番号の入力形式を制限します。lookupable メソッドからのイベントを受け取り、その中で lookupTo メソッドを使って、入力した郵便番号から住所を検索し、その住所を送信フォームに表示します。

郵便番号
住所

次のソースコードの中では使っていませんが、lookupable メソッドのイベントの引数からも郵便番号を取得できます。

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#c2').lookupable(function(c) {
    $(this).lookupTo('#a2');
  });
});
//]]>
</script>

<form method="get" action="./example.cgi">
<table>
<tr>
<td width="80">郵便番号</td>
<td>
<input id="c2" type="text" name="code" size="10" />
</td>
</tr><tr>
<td>住所</td>
<td><input id="a2" type="text" name="address" size="60" /></td>
</tr><tr>
<td colspan="2"><input type="submit" value="送信" /></td>
</tr>
</table>
</form>

関連情報

ベーシック
  • 郵便番号から住所を検索する
  • 住所の単語から郵便番号を検索する
  • 住所の単語から郵便番号を検索してその住所を表示する
送信フォーム
  • 郵便番号を住所に変換するフォーム
  • 郵便番号を住所とフリガナに変換するフォーム #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.