How to implement autocompletion in a modal? (Ruby/JavaScript)

Question

I am willing to create a new client from my client#index. This works properly while clicking the "Add a client" button and filling in the asked information (name, address, mail, phone_number).

I would like to implement autocompletion with Google Maps on the address. I used Google's Places API Web Service in order to do so.

1 - I enabled the Places API in the Library in my Google Developer's console

2 - I activated the address autocomplete on the input with the client_address id and exported the function with the following code:

 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 - I imported the function and called it from the map JavaScript pack with the following code:

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 - If I inspect the input field of my client_address, this is what I get:

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

5 - In case needed, this is my simple-form-for

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

Could someone explain why autocomplete="off" and how could I, in my modal, make it work properly based on Google's Places API Web Service?

Thanks for your help!

Max