Места и рельсы Алголии: форма автозаполнения

Question

У меня есть форма адреса, которую я хотел бы заполнить автоматически после ввода пользователем адреса (в моем случае, начиная с улицы, что, как я проверял, не является проблемой). Вот что я сделал до сих пор:

1. Установленные гемы: algoliasearch-rails и algolia-place-rails
2. Создан файл автозаполнения: app / assets / javascripts / autocomplete. js и написал код, как описано здесь

->

import places from 'places.js';

(function() {
  var placesAutocomplete = places({
    appId: 'xxx',
    apiKey: 'xxx',
    container: document.querySelector('#form-address'),
    templates: {
      value: function(suggestion) {
        return suggestion.name;
      }
    }
  }).configure({
    type: 'address'
  });
  placesAutocomplete.on('change', function resultSelected(e) {
    document.querySelector('#form-city').value = e.suggestion.city || '';
    document.querySelector('#form-zip').value = e.suggestion.postcode || '';
  });
})();

Я установил node_modules: местах. js с npm

3. Вернулся к моему файлу вида (который является частью многошаговой формы) и добавил необходимые идентификаторы в поля формы app / views / user_steps / address. html .erb

<div class="container">
    <p class="notification">Please finalise your personal information.</p>
        <div id="myModal" class="modal" >

                <div class="modal-content">
                    <div class="modal-body">     
                        <button type="button" class="btn btn-secondary dismiss-close" data-dismiss="modal">Close</button>
                    </div>
                </div>    

        </div>
    <div class="center-items-register-second">

    <%= form_for(@user, url: wizard_path, remote: true) do |f| %>
    <%= render "devise/shared/error_messages" %>


        <div class="row second 1">
            <div class="column">
              <div class="field wizard">
                <%= f.label :street, class: 'required' %><br />
                <%= f.text_field :street, id: 'form-address', class: 'form-control' %>
              </div>
            </div>

            <div class="column">
                <div class="field housenumber">
                    <%= f.label :house_number, class: 'required' %><br />
                    <%= f.text_field :house_number, class: 'form-control' %>
                </div>
            </div>
        </div>


        <div class="row second 2">
            <div class="column">
                <div class="field wizard">
                    <%= f.label :city, class: 'required' %><br />
                    <%= f.text_field :city, id: 'form-city', class: 'form-control' %>
                </div>
            </div>

            <div class="column">
                <div class="field wizard zipcode">
                    <%= f.label :zip_code, class: 'required' %><br />
                    <%= f.text_field :zip_code, id: 'form-zip', class: 'form-control' %>
                </div>
            </div>

        </div>


            <div class="row btns second 3">
                <div class="column btns">

                     <%= f.submit "Register", class: 'btn form margin second'%>

                </div>
                <% end %>
                <div class="column btns">
                    <%= link_to "Quit", @user, method: :delete, data: { confirm: "Your data won't be saved! Are you sure you want to quit registration process?", title: " " },  class: 'btn form margin second' %>
                </div>

            </div>

        </div>

    </div>
</div>

Я также добавил в свою заявку. js файл:

//= require algolia-places-rails/places.min

И у меня есть файл конфигурации для AlgoliaSearch: algoliasearch.rb

AlgoliaSearch.configuration = { application_id: 'xxx', api_key: 'xxx' }

В моей форме, однако ничего не изменилось. Я буду sh это будет похоже на это .

Answer 1

Мне потребовалось около 8 часов, чтобы выяснить проблему. Сначала мне понадобился веб-упаковщик для управления своими пакетами Так что добавлено в мое приложение rails, а затем установлено

# Gemfile
gem 'webpacker'

#Install
bundle install 
rails webpacker:install

Это создает новую папку app / javascript / packs, где также можно найти (новое) приложение. js файл. Там позже я бы импортировал свою функцию.

Но сначала мне нужно было go мой адрес. html .erb и получить фактический идентификатор, который был скрыт, и мне пришлось проверить элемент в браузере. Таким образом, этот бит кода должен быть следующим:

<div class="row second 1">
            <div class="column">
              <div class="field wizard">
                <%= f.label :street, class: 'required' %><br />
                <%= f.text_field :street, class: 'form-control' %>
              </div>
            </div>

            <div class="column">
                <div class="field housenumber">
                    <%= f.label :house_number, class: 'required' %><br />
                    <%= f.text_field :house_number, class: 'form-control' %>
                </div>
            </div>
        </div>


        <div class="row second 2">
            <div class="column">
                <div class="field wizard">
                    <%= f.label :city, class: 'required' %><br />
                    <%= f.text_field :city, class: 'form-control' %>
                </div>
            </div>

            <div class="column">
                <div class="field wizard zipcode">
                    <%= f.label :zip_code, class: 'required' %><br />
                    <%= f.text_field :zip_code, class: 'form-control' %>
                </div>
            </div>

        </div>

Так что нет определения идентификаторов в форме. Я удалил их.

Следующим шагом создайте файл app / javascript / packs / autocomplete. js

import places from 'places.js';

const initAutocomplete = () => {
  var placesAutocomplete = places({
    container: document.getElementById('user_street'),
    templates: {
      value: function(suggestion) {
        return suggestion.name;
      }
    }
  }).configure({
    type: 'address'
  });

  placesAutocomplete.on('change', function resultSelected(e) {
    document.getElementById('user_city').value = e.suggestion.city || '';
    document.getElementById('user_zip_code').value = e.suggestion.postcode || '';
  });
};

export { initAutocomplete };

Теперь на самом деле места. js можно импортировать из моих node_modules (которые я установил ранее , следуя инструкции на веб-сайте algolia.).

И последнее, но не менее важное, как я уже упоминал выше, я вернулся к app / javascript / packs / application. js и импортировал свою функцию:

import { initAutocomplete } from './autocomplete';
initAutocomplete();

Так что теперь это работает для меня просто отлично! Адресные паерты также вставляются в нужные поля моей формы.