[Rails] Implementation of automatic address input using jpostal and jp_prefecture

Target

** If you enter the zip code on the new user registration screen, the subsequent addresses (up to the street address) will be automatically entered. ** ** ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introductionIntroduction of Bootstrap3 -Login function implementation

Implementation

1. Introduced jQuery plugin

** ① Access the link below. ** **

jpostal GitHub

** ② Click Clone or download ** スクリーンショット 2020-06-09 8.12.28.png

** ③ Click Download ZIP ** スクリーンショット 2020-06-09 8.12.32.png

** ④ Place jquery.jpostal.js in the downloaded folder in ʻapp / assets / javascript`. ** ** スクリーンショット 2020-06-09 8.20.45.png

2. Introduce Gem

Gemfile


gem 'jquery-rails'
gem 'jp_prefecture'

Terminal


$ bundle

application.js


//= require rails-ujs
//= require activestorage
//= require turbolinks 
//= require jquery //Described below turbolinks
//= require_tree .

3. Add column

Terminal


$ rails g migration AddColumnsToUsers postcode:integer prefecture_code:integer address_city:string address_street:string address_building:string

~_add_columns_to_users.rb


class AddColumnsToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :postcode, :integer
    add_column :users, :prefecture_code, :integer
    add_column :users, :address_city, :string
    add_column :users, :address_street, :string
    add_column :users, :address_building, :string
  end
end

Terminal


$ rails db:migrate

4. Edit the model

user.rb


include JpPrefecture
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

[Explanation]

python


include JpPrefecture
jp_prefecture :prefecture_code

➡︎ Automatically convert from the prefecture code to the prefecture name.

python


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

➡︎ Make it possible to refer to the prefecture name with ~ .prefecture_name. Example) @ user.prefecture_name can display the address (prefecture) of the corresponding user.

5. Edit controller

Add address information to the strong parameter.

application_controller.rb


def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [
    :email,
    :name,
    :postcode,
    :prefecture_name,
    :address_city,
    :address_street,
    :address_building
  ])
end

6. Edit the view

slim:registrations/new.html.slim


/Postscript
= f.label :postcode, 'Postal code'
br
= f.text_field :postcode, autocomplete: 'postcode', class: 'form-control'
br

= f.label :prefecture_name, 'Prefectures'
br
/Display 47 prefectures with a pull-down menu
= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, { prompt: 'Please select' }, class: 'form-control'
br

= f.label :address_city, 'Municipality'
br
= f.text_field :address_city, autocomplete: 'address_city', class: 'form-control'
br

= f.label :address_street, 'address'
br
= f.text_field :address_stree, autocomplete: 'address_street', class: 'form-control'
br

= f.label :address_building, 'building'
br
= f.text_field :address_building, autocomplete: 'address_building', class: 'form-control'
br

7. Create / edit JavaScript file

Terminal


$ touch app/assets/javascripts/address_autofill.js

address_autofill.js


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

Recommended Posts

[Rails] Implementation of automatic address input using jpostal and jp_prefecture
[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
Ruby on Rails address automatic input implementation method
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
Implementation of tabs using TabLayout and ViewPager
[Rails] Implementation of search function using gem's ransack
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of image enlargement function using lightbox2
[Nuxt / Rails] POST implementation using axios and devise_token_auth
[Rails] Implementation of batch processing using whenever (gem)
[Rails] Implementation of PV number ranking using impressionist
[Rails] Implementation of image slide show using Bootstrap 3
[Rails] Implementation of drag and drop function (with effect)
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
Rails6: Input the initial data of ActionText using seed
Rails implementation of ajax removal
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
[Rails 6] Implementation of search function
[Rails] Implementation of category function
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of new registration function in wizard format using devise
[Rails] [jQuery] Asynchronous like function implementation using remote: true and js.erb
Read the implementation of Rails 6 multi-DB automatic switching (ActiveRecord :: Middleware :: DatabaseSelector)
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
[Rails] Implementation of image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
Implementation of validation using regular expressions
[Rails] Implementation of many-to-many category functions
[Rails] Differences and usage of each_with_index and each.with_index
Default implementation of Object.equals () and Object.hashCode ()
[Rails] I will explain the implementation procedure of the follow function using form_with.
Introduction of Sudoku answer application "Sudoku automatic answer" (Android version) and its implementation function
[Android] Implementation of side-scrolling ListView using RecyclerView
Whereabouts of JAXB Reference implementation and DatatypeConverterImpl
Introduction memo of automatic test using Jenkins
Implementation of user authentication function using devise (2)
Rails Addition of easy and easy login function
Implementation of user authentication function using devise (1)
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
Implementation of user authentication function using devise (3)
Acquisition of input contents using Scanner (Java)
[Vue.js] Implementation of menu function Implementation version rails6
[Ruby on rails] Implementation of like function
[Rails] Implementation of validation that maintains uniqueness
[Vue.js] Implementation of menu function Vue.js introduction rails6
[Rails] Set validation for the search function using Rakuten API (from the implementation of Rakuten API)