Ruby on Rails So implementieren Sie die automatische Adresseneingabe

Einführung

Aktuelle Version: macOS Catalina 10.15.3

Ich habe versucht, das automatische Ausfüllen von Adressen in Ruby on Rails zu implementieren. Beschreiben Sie als Memorandum. Ich hoffe, Sie finden es hilfreich.

Verfahren

(1) Laden Sie zunächst die js-Datei (jQuery-Plug-In) von unten herunter. jquery.jpostal.js

(2) Platzieren Sie die heruntergeladene JS-Datei in App / Assets / Javascripts.

(3) Nachdem Sie der Gemfile Folgendes hinzugefügt haben, installieren Sie "$ bundle install" im Terminal.

Gemfile

#Um jQuery mit Rails verwenden zu können
gem 'jquery-rails'
#Adressfunktion
gem 'jp_prefecture'

(4) Nachdem Sie dem Benutzermodell die folgende Spalte hinzugefügt haben, klicken Sie im Terminal auf "$ rails db: migrate".

Terminal

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

(5) Fügen Sie app / models / user.rb Folgendes hinzu, um das Benutzermodell zu bearbeiten.

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) Fügen Sie der anzuzeigenden Ansicht Folgendes hinzu (Dieser Artikel wird auf dem Bildschirm zur Registrierung neuer Mitglieder durch Einführung von devise implementiert). Zusätzliche Beschreibung in app / views / devise / registrations / new.html.erb

ruby:new.html.erb

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

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

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

<%= f.label :Straßenbündel%>
<%= f.text_field :address_street,  autocomplete: "address_street", id: "customer_address_street" %>

(7) Beschrieben in app / assets / javascripts / user.coffee, um die jpostal-Methode aufzurufen.

user.coffee

$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city" : "%4",
                  "#user_address_street" : "%5%6%7"
                }
  })
  #Eingabeelementformat
    #   %3 Präfekturen
    #   %4 Gemeinden
    #   %5 Stadtgebiet
    #   %6 Adresse des großen Büros
    #   %7 Name des großen Büros

(8) Zusätzliche Beschreibung unten in app / controller / users_controller.rb

users_controller.rb

  private
  def user_params
    params.require(:user).permit(:postcode, :prefecture_code, :address_city, :address_street) #Spalten, die Speicherung ermöglichen
  end

Nach Eingabe der Postleitzahl wird die Adresse automatisch eingegeben.

Ergänzung

Wenn die Postleitzahl nicht automatisch eingegeben wird, es sei denn, Sie wechseln zu dem Bildschirm, auf dem die automatische Ausfüllung der Adresse festgelegt ist, und laden sie erneut. Durch Hinzufügen von Daten: {"turbolinks" => false} zur Linkbeschreibung wurde das Problem behoben.

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

Die erstmalige Implementierung dauerte ca. 20 Minuten. Wir hoffen auf Ihre Referenz.