How to trigger Google Places Autocomplete results dropdown after first use?

Question

Using the Google Maps JavaScript API (via <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>), my address input ...

... shows autocomplete info when I type "1251" ...

... and adds the complete address to the input when I click the address (or hit enter):

Currently, if I click the address input again (after the address has been added), it simply adds focus to the input and nothing else:

My question is: When clicking an already autocompleted input, how do I trigger the dropdown again, using the input's data?

Hitting delete once (simply changing the ending from USA to US) re-opens the dropdown, but I don't want the user to have to change the entry to see the pulldown. Here's what I've tried:

$('.geoloc input').on({

    // neither 'place_changed' nor 'focus' trigger the dropdown (doesn't work)
    click: function(){
        google.maps.event.trigger(this, 'place_changed');
        // or
        google.maps.event.trigger(this, 'focus', {});
    },

    // enter selects first address from dropdown (works)
    keydown: function(e){
        if (e.keyCode == 13) {
            google.maps.event.trigger(this, 'keydown', {keyCode:40});
            google.maps.event.trigger(this, 'keydown', {keyCode:13});
            this.blur();
        }
    }
});

What's the correct method for programmatically triggering the dropdown using the field value?

"... re-opens the dropdown, but that's not what I want." Then what do you want? What values do you expect to see in the dropdown when you trigger focus the second time? — Joseph Marikle, May 31 '18 at 17:35
You're right, I was unclear about this ... edited it to say "I don't want the user to have to change the entry to see the pulldown" — designosis, May 31 '18 at 21:03
Does this answer your question? [Need to manually start the google places autocomplete](https://stackoverflow.com/questions/9892092/need-to-manually-start-the-google-places-autocomplete) — Alex R, Oct 11 '20 at 22:18

score 2 · Accepted Answer · answered May 31 '18 at 18:00

I think I know what you're trying to accomplish. You want the state of the text field to be preserved so that when focus is regained, it can revert back to where you were. Would something like this work for you?

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

input.addEventListener('input', function () {
  this.dataset.originalVal = this.value;
});
input.addEventListener('focus', function () {
  this.value = input.dataset.originalVal ? input.dataset.originalVal : this.value;
});

input {
  width: 300px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="searchTextField" type="text">

any way to save the full inserted value instead of the typed one till selecting one? — evavienna, Oct 23 '22 at 15:09

score 0 · Answer 2 · answered Oct 11 '20 at 22:17

0

The accepted answer doesn't do it for me, but this other one does: Need to manually start the google places autocomplete

TL;DR, call the input's .focus() after a delay.

answered Oct 11 '20 at 22:17

Alex R

11,364
15
100
180

How to trigger Google Places Autocomplete results dropdown after first use?

2 Answers2