【jpostal】 jQuery 주소 자동 입력 rails 아마 가장 쉬운 방법으로

【골】

우편번호를 입력하면 자동으로 주소가 입력

참고 : h tps : // 레모테테. jp / 라이 ls - jp_p 레후 c 트레 - j s s l

【메리트】

■UX의 향상
■javascript 이해도 향상

【개발 환경】

■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

【실장】

1. 외부의 준비(가장 중요한 누출이 없도록!!)

※ gem 2종류 도입
※ 아래의 URL로 'jquery.jpostal.js'를 입수하여 작성한 어플리케이션의
javascripts 디렉토리에 저장
htps : // 기주 b. 이 m/마늘/j 쿠에 ry. j포s타l. js

gemfile.

gem 'jp_prefecture' ＃住所取得用
gem 'jquery-rails'　＃jquery起動用

mac.terminal

$ bundle install

2. 연습용 애플리케이션 추가

※ 여기 를 참조
※scaffold를 사용(이번은 user를 사용)

mac.terminal

$ rails g scaffold Users name:string text:text postcode:integer prefecture_code:integer address_city:string address_street:string address_building:string

컬럼을 모두 만들어 둡니다! !

mac.terminal

$ rails db:migrate

3.view를 조정

※「id」이하를 각 기술에 추기, 여기 중요, jquey로 읽어들이기를 가능하게 하기 위해(때문에)

user/_form.html.erb

<%= form.text_field :postcode , id: "user_postcode" %>
<%= form.text_field :prefecture_code , id: 'user_prefecture_code' %><br>
<%= form.text_field :address_city , id: "user_address_city"%>
<%= form.text_field :address_street , id: "user_address_street"%>

4. javascripts 설명

javascripts/application.js

 //= require jquery #13行目に追加

　※　’//= require_tree .’ 보다 아래의 행에는 절대로 기술하지 말아 로드되지 않습니다

javascripts/users.coffe

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

※ 여기에서 view에 기술한 'id'를 인식하고 view를 변경해 줍니다.

이상