Comment mettre en œuvre autocomplétion dans un modal? (Ruby / JavaScript)

voix
0

Je suis prêt à créer un nouveau client de mon index client #. Cela fonctionne correctement en cliquant sur le bouton « Ajouter un client » et remplir les informations demandées (nom, adresse, courrier, phone_number).

Je voudrais mettre en œuvre autocomplétion avec Google Maps sur l'adresse. Je Places de Google API de service Web afin de le faire.

1 - Je l'API Places permis dans la bibliothèque dans la console de mon Google Developer

2 - J'activé le remplissage automatique d'adresse sur l'entrée avec l'identificateur de adresse_client et exporté la fonction avec le code suivant:

 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 - J'ai importé la fonction et l'a appelé à partir de la carte Pack JavaScript avec le code suivant:

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 - Si j'inspecte le champ de saisie de mon adresse_client, voici ce que je reçois:

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

5 - En cas de besoin, c'est ma forme simple pour

<%= 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 %>

Quelqu'un pourrait-il expliquer pourquoi autocomplete = « off » et comment pourrais-je, dans mon modal, le faire fonctionner correctement basé sur API Places de service Web de Google?

Merci de votre aide!

max

Créé 27/11/2018 à 15:18
source utilisateur
Dans d'autres langues...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more