Google Autocomplete - enter to select

kinkersnick picture kinkersnick · Jul 9, 2012 · Viewed 40.9k times · Source

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

sren picture sren · Aug 3, 2012

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(); 
    }
  });