Ruby on Rails Comment implémenter la saisie d'adresse automatique

introduction

Version actuelle: macOS Catalina 10.15.3

J'ai essayé d'implémenter le remplissage automatique des adresses dans Ruby on Rails. Décrivez comme un mémorandum. J'espère que cela vous aidera.

procédure

(1) Tout d'abord, téléchargez le fichier js (plug-in jQuery) à partir de ce qui suit. jquery.jpostal.js

(2) Placez le fichier js téléchargé dans app / assets / javascripts.

(3) Après avoir ajouté ce qui suit au Gemfile, $ bundle install` '' dans le terminal.

Gemfile

#Pour pouvoir utiliser jQuery avec Rails
gem 'jquery-rails'
#Fonction d'adresse
gem 'jp_prefecture'

(4) Après avoir ajouté la colonne suivante au modèle utilisateur, $ rails db: migrate``` dans le terminal.

Terminal

rails generate migration AddColumnsToUsers postal_code:string prefecture_code:string address_city:string address_street:string

(5) Ajoutez ce qui suit à app / models / user.rb pour modifier le modèle utilisateur.

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

(6) Ajoutez ce qui suit à la vue à afficher (Cet article est implémenté sur l'écran d'inscription des nouveaux membres en introduisant devise) Description supplémentaire dans app / views / devise / registrations / new.html.erb

ruby:new.html.erb

<%= f.label :Code postal%>
<%= f.text_field :postal_code, autocomplete: "postal_code", id: "customer_postal_code" %>

<%= f.label :Préfectures%>
<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all,  :name, :name, autocomplete: "prefecture_code", id: "customer_prefecture_code" %>

<%= f.label :Municipalité%>
<%= f.text_field :address_city,  autocomplete: "address_city", id: "customer_address_city" %>

<%= f.label :Tas de rue%>
<%= f.text_field :address_street,  autocomplete: "address_street", id: "customer_address_street" %>

(7) Décrit dans app / assets / javascripts / user.coffee pour appeler la méthode jpostal.

user.coffee

$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city" : "%4",
                  "#user_address_street" : "%5%6%7"
                }
  })
  #Format de l'élément d'entrée
    #   %3 préfectures
    #   %4 communes
    #   %5 zone urbaine
    #   %6 Adresse du grand bureau
    #   %7 Nom du grand bureau

(8) Description supplémentaire ci-dessous dans app / controllers / users_controller.rb

users_controller.rb

  private
  def user_params
    params.require(:user).permit(:postcode, :prefecture_code, :address_city, :address_street) #Colonnes qui permettent le stockage
  end

Après avoir saisi le code postal, l'adresse sera saisie automatiquement.

Supplément

Si le code postal n'est pas saisi automatiquement à moins que l'écran ne soit remplacé par l'écran de réglage de la saisie automatique d'adresse et rechargé, l'ajout de données: {"turbolinks" => false} à la description du lien a résolu le problème.

<%= link_to 'Inscription des membres', '/customers/sign_up',  data: {"turbolinks" => false} %>

Il a fallu environ 20 minutes pour le mettre en œuvre pour la première fois. Nous espérons pour votre référence.