読者です 読者をやめる 読者になる 読者になる

しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

AjaxZip3を使って郵便番号から住所を取得する

AjaxZip3というJSライブラリを使って郵便番号から住所を取得してみようと思います。
こちらのライブラリはyubinbangoと同じ作者の方が作っているようです。
Githubではyubinbangoの方が新しくて推奨されていました。

郵便番号を入れると住所を取得するJSライブラリ、yubinbangoを使ってみる - しめ鯖日記

使い方

使い方は下のとおりにajaxzip3のタグを追加するだけです。
必須ではないのですがjqueryも一緒にインストールします。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="UTF-8"></script>

下のようにinputタグを配置します。

<input type="text" name="zip" size="10" maxlength="8">
<input type="text" name="addr1" size="20">
<input type="text" name="addr2" size="60">
<input type="text" name="addr3" size="60">
<input type="button" id="button" value="load" />

buttonタグを押下時にAjaxZip3.zip2addrを呼ぶようにします。
引数には各inputタグのnameプロパティーの値を入れます。

<script type="text/javascript">
  $("#button").click(function() {
    AjaxZip3.zip2addr('zip', '', 'addr1', 'addr2', 'addr3');
  });
</script>

この状態で郵便番号を入力し、ボタンを押下すると下のように補完されます。

f:id:llcc:20160220234416p:plain

引数にはnameプロパティーの値を入れずに要素を直接入れても動くようです。

参考URL

郵便番号をもとにした住所検索apiを利用する(js) - Qiita