アカハヤの技術ブログ

クズと天才は紙一重 twitter:@akahaya719

jpostal.jpで住所を自動入力

jpostal.jpという、Nintonという日本の会社が開発している。

郵便番号から住所を自動入力するjQueryプラグインがあります。

これを使って、Railsで郵便番号から住所を自動で入力してくれる

フォームをつくります。

https://github.com/ninton/jquery.jpostal.js/

こちらより、

jquery.jpostal.jsというファイルを習得し、

vendor/assets/javascripts/に追加する。

 

assets/javascripts/application.jsに以下を記述

//= require jquery.jpostal

 

assets/javascripts/address.coffeeを作成し、以下を記述

$ ->
 $("#address_zipcode").jpostal({
  postcode : [ "#address_zipcode" ],
  address : {
       "#address_prefecture_name" : "%3",
       "#address_city" : "%4%5",
       "#address_street" : "%6%7"
       }
 })

 

今回は、住所をユーザに紐づけたのでこんな感じに編集

 

<%= simple_form_for (@user) do |f| %>

<%= f.input :name %>
<%= f.input :post_number, input_html:{id:"address_zipcode"} %>
<%= f.input :address_city, input_html:{id:"address_city"} %>
<%= f.input :address_prefecture_name, input_html:{id:"address_prefecture_name"} %>
<%= f.input :address_street, input_html:{id:"address_street"} %>

<%= f.button :submit %>
<% end %>


これで完成です。

 

郵便番号を入れると住所が自動で入力されます。