Как реализовать автозаполнение в модале?(Ruby / JavaScript) - PullRequest
Новая
       37

Как реализовать автозаполнение в модале?(Ruby / JavaScript)

0 голосов
/ 27 ноября 2018

Я хочу создать нового клиента из моего индекса # клиента.Это работает правильно при нажатии кнопки «Добавить клиента» и заполнении запрашиваемой информации (имя, адрес, почта, номер телефона).

Я хотел бы реализовать автозаполнение с помощью Google Maps по адресу.Я использовал Google Places API Web Service для этого.

1 - я включил API Адресов в библиотеке в консоли моего разработчика Google

2 - я активировал автозаполнение адреса на входе с идентификатором client_address и экспортировал функцию со следующим кодом:

 function autocomplete() {
  document.addEventListener("DOMContentLoaded", function() {
    var clientAddress = document.querySelector(".client_address").lastChild;

    if (clientAddress) {
      var autocomplete = new google.maps.places.Autocomplete(clientAddress, { types: [ 'geocode' ] });
      console.log("please autocomplete")
      google.maps.event.addDomListener(clientAddress, 'keydown', function(e) {
        if (e.key === "Enter") {
          e.preventDefault(); // Do not submit the form on Enter.
        }
      });
    }
  });
}

export { autocomplete };

3 - Я импортировал функцию и вызвал ее из пакета JavaScript карты со следующим кодом: 

import GMaps from 'gmaps/gmaps.js';
import { autocomplete } from '../components/autocomplete';

console.log('Hello World from Webpacker 2')

const mapElement = document.getElementById('map');
if (mapElement) { // don't try to build a map if there's no div#map to inject in
  const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
  const markers = JSON.parse(mapElement.dataset.markers);
  map.addMarkers(markers);
  if (markers.length === 0) {
    map.setZoom(2);
  } else if (markers.length === 1) {
    map.setCenter(markers[0].lat, markers[0].lng);
    map.setZoom(14);
  } else {
    map.fitLatLngBounds(markers);
  }
}
autocomplete();

4 - Если я проверю поле ввода моего client_address, этовот что я получаю: 

<input class="form-control string required" id="client_address" type="text" name="client[address]" placeholder="Enter a location" autocomplete="off">

5 - В случае необходимости, это моя простая форма для 

<%= simple_form_for(@client) do |f| %>
  <%= f.error_notification %>

  <% if @client.errors.any? %>
    <div class="errors-container">
      <ul>
        <% @client.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :address, wrapper_html: { id: "client_address" }, input_html: { id: "client_address" }, class: "awesomeplete" %>
    <%= f.input :mail %>
    <%= f.input :phone_number %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, class: "btn-primary" %>
  </div>
<% end %>

Может кто-нибудь объяснить, почему autocomplete = "off" и как я могув моем модале, заставить его работать должным образом на основе веб-службы Google Places API?

Спасибо за вашу помощь!

Макс

...