Set input value automatically and open suggestions - Google Autocomplete

Question

I have an input field with google autocomplete attached on it. I'd like to populate this field with some default values, focus the input and automatically open the prediction box below the input.

I obviously have no problem setting the input value and focus, but I can't find a way to open the suggestions box. It opens on any user keypress; anyway, simulating the keypress event on the input didn't work.

So I'm wondering if there's a way to trigger the event that makes the autocomplete box show up.

I have the following example code:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input type="text" id="q" />

JS:

var input = document.getElementById('q');
var autocomplete = new google.maps.places.Autocomplete(input);
$('#q').val('Rome, ').focus();
// how to open suggestions box ?

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

It’s not possible to do that through js or jQuery because pragmatical use of event triggering functions is not as same as firing the native DOM event.

This Fiddle shows the difference between native DOM event and jQuery event trigger, you’ll see the difference between executing the code and clicking the link.

Also in this Fiddle I updated your code by altering 'Rome, 'so that it simulates key-stroking but it made no changes, but when you hit a key it works.

You may check these links too:

edited May 23 '17 at 11:59

Community

1
1

answered May 05 '13 at 18:37

Mi-Creativity

9,554
10
38
47

I actually manage to do it already, but it stopped working for some reason. If I manage to get it to work again, I will share the solution here – Alexandre Bourlier May 29 '15 at 09:25
Actually, someone did it for me :) https://stackoverflow.com/questions/22030076/trigger-google-places-autocomplete – Alexandre Bourlier May 29 '15 at 15:31

Set input value automatically and open suggestions - Google Autocomplete

1 Answers1