JS Input submit with Google Places autocomplete

Question

I use GoogleMaps Places autocomplete, and I have a problem:

Currently, to validate, I must:

1. enter the first letters of the city
2. use the mouse and click on the desired result
3. press the button "find"

This process works.

I would add the following process:

1. enter the first letters of the city
2. move with the UP / DOWN to move to the desired result
3. press the "enter" key on my keyboard

Do you have a solution plz ?

Thank you very much

My view

  <div class="home--searchbox">

    <form class="geocoding form-inline">
      <input placeholder="D'où partez vous ?" type="text" class="form-control"/>
      <button class="btn btn-success disabled" data-urlto="<%= search_path %>">Find</button>
    </form>

  </div>

Googleplaces.coffee

$ ->
  $('.geocoding')
    .each (i, el) ->
      $el = $(el)
      $input = $el.find('input')
      autocomplete = new google.maps.places.Autocomplete($input.get(0), types: ['geocode'])
      $el.data 'autocomplete', autocomplete
      google.maps.event.addListener autocomplete, 'place_changed', ->
        $el.trigger 'address_selected'

    .on 'focus', 'input', ->
      autocomplete = $(this).parent().data('autocomplete')
      if navigator.geolocation
        navigator.geolocation.getCurrentPosition (position) ->
          geolocation = new google.maps.LatLng position.coords.latitude, position.coords.longitude
          autocomplete.setBounds new google.maps.LatLngBounds(geolocation, geolocation)

    .on 'address_selected', ->
      place = $(this).data('autocomplete').getPlace()
      lat = place.geometry.location.lat()
      long = place.geometry.location.lng()
      city = $.grep(place.address_components, (component) ->
               component.types[0] == 'locality'
             )[0].long_name
      address = place.formatted_address
      $(this).find('button')
        .data
          lat: lat
          long: long
          city: city
          address: address
        .removeClass('disabled')

    .on 'click', 'button', (e) ->
      e.preventDefault()
      data = $(this).data()
      urlto = data.urlto
      delete data.urlto
      url = "#{urlto}?#{$.param data}"
      document.location = url

Answer 1

The up, down, and enter keys work in the code sample for Google Maps Place Autocomplete. You can examine the code here.