郵便番号から住所を自動で補完する機能。

概要

住所登録するときに郵便番号を入力すれば、自動で住所が出てくるやつ。
便利ですよね。
こんな感じです。

使うもの

・jp_prefectureというgem
これは４７都道府県をいちいち全部書かなくても勝手に変換してくれます。
・jquery.jpostal.jsというプラグイン
これは、郵便番号を入力すると町までを予測してくます。

手順

1.jquery.jpostal.jsを導入しよう！

https://github.com/ninton/jquery.jpostal.js/
このリンクからjquery.jposta.jsというファイル(ぜんぶ)を取得して、
assets/javascript/に置いて下さい。

2.gem入れよう！

Gemfile

gem 'jp_prefecture'
gem 'jquery-rails' 

bundleしましょう。

３.mifrationファイルに住所系のカラムを入れよう！

mifrationファイル

t.string :postcode
t.string :prefecture_code
t.string :address_city
t.string :address_street
t.string :address_building

postcode ：郵便番号
prefecture_code　：県
address_city　：市
address_street　：長村
address_building　：部屋番

です。
一番上のはint型でもokです。

$ rails db:migrateをしましょう。

4.県を取得しよう！

modelから取得できます。

user.rb

jp_prefecture :prefecture_code

 def prefecture_name
 　JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
 end

 def prefecture_name=(prefecture_name)
   self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
 end

これで県拾えまっせ。

次にビュー行きます。
form作ってこれ入れます。

new.haml

    = f.text_field :postcode
    = f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name, include_blank: true
    = f.text_field :address_city
    = f.text_field :address_street
    = f.text_field :address_building

県だけセレクト、モデルから直で県が取得できます。

5.jQueryでjpostalを使おう！

controller作ればcoffeeファイル出来ます。

app/assets/javascripts/user.coffee

users.coffee

$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city"            : "%4",
                  "#user_address_street"          : "%5%6%7"
                }
  })

最後params作って完了！

controller

def create
  params.require(:user).permit(:postcode, :prefecture_name, :address_city, :address_street, :address_building)
end