Google Places Autocomplete place_changed event fires after form submission when pressing enter

Question

I've added google.maps.places.Autocomplete from the Google Maps Javascript API V3 to a basic search form. I am trying to find a reliable way to detect whether the user has chosen an item from the autocomplete list (either with mouse or keyboard) or is submitting free-form text.

Code: http://jsfiddle.net/2rhL3cyk/1/

I am testing against the following basic scenarios, each of which should result in a form submission. locMatch should be true if the user selected an autocomplete item.

1. Enter freeform text, hit enter:
   • place_changed fired
   • onSubmit fired. locMatch: false
2. Enter text, use down arrow to select a place, and hit enter:
   • onSubmit fired. locMatch: false
   • place_changed fired (too late!)
3. Enter text, use mouse to select a place, click submit:
   • place_changed fired (after clicking on place)
   • onSubmit fired. locMatch: true (after clicking button)
4. Enter text, use mouse to select a place, change text to freeform string, hit enter:
   • place_changed fired (after clicking on place)
   • place_changed fired (after entering new text and hitting enter)
   • onSubmit fired. locMatch: false
5. Enter text, use mouse to select a place, change text to freeform string, click submit:
   • place_changed fired (after clicking on place)
   • onSubmit fired. locMatch: true (after entering new text and clicking button)
6. Enter text, use mouse to select a place, enter new text, use down arrow to select a place, and hit enter
   • place_changed fired (after clicking on place)
   • onSubmit fired. locMatch: true (after entering new text and clicking button)
   • place_changed fired

Only cases 1, 3, and 4 work as expected.

In #2, onSubmit is getting fired before place_changed, so it doesn't have a chance to set locMatch until after the form would have been submitted. It doesn't help to trigger place_changed manually, because even though the input field has the correct text, autocomplete.getPlace() remains undefined until after the form submit fires. I was able to force it to work with a horrible setTimeout hack like so:

$('#loc_search').submit(function (e) {
  setTimeout(function () {
    console.log('submit for real! locMatch:', locMatch);
    $(this).submit();
  }, 150);
});

I would really like to find a more sensible way to fix this. I imagine the timeout value might depend on a user's machine specs, and I don't want any unnecessary delay.

In #5, it doesn't call place_changed at all after hitting enter. Again, I tried manually triggering a place_changed event in the submit handler, but this has no effect because getPlace() returns the previously selected value, even though the user has typed over it in the input field. One way to solve this is by resetting locMatches on change, but this breaks #6 below.

$('#location').change(function() {
  locMatch = false;
});

In #6, locMatch is still true from the previous click, so it does give the expected result, but it is not technically correct because place_changed is still being fired after the form submission. The above fix for #5 breaks this case, however the setTimeout method above fixes it again.

I've been pulling my hair out over this all day, any advice would be greatly appreciated. Thank you!

Answer 1

Having the exact same problem here. The Autocomplete library doesn't provide any other event than place_changed. There is also no status property e.g. request_pending.

There is a "hack" from mmalone here: Google Autocomplete - enter to select Worked great for me.