Google Autocomplete - enter to select

Question

I have Google Autocomplete set up for a text field of an HTML form, and it's working perfectly.

However, when the list of suggestions appear, and you use the arrows to scroll and select using enter, it submits the form, though there are still boxes to fill in. If you click to select a suggestion it works fine, but pressing enter submits.

How can I control this? How can I stop enter from submitting the form, and instead be the selection of a suggestion from autocomplete?

Thanks! {S}

Answer 1

You can use preventDefault to stop the form being submitted when enter is hit, I used something like this:

  var input = document.getElementById('inputId');   google.maps.event.addDomListener(input, 'keydown', function(event) {      if (event.keyCode === 13) {          event.preventDefault();      }   });  

Answer 2

Using the Google events handling seems like the proper solution but it's not working for me. This jQuery solution is working for me:

$('#inputId').keydown(function (e) {   if (e.which == 13 && $('.pac-container:visible').length) return false; }); 

.pac-container is the div that holds the Autocomplete matches. The idea is that when the matches are visible, the Enter key will just choose the active match. But when the matches are hidden (i.e. a place has been chosen) it will submit the form.