autocomplete

Google Autocomplete - enter to select


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}


Solution

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