How to automatically select autocomplete place suggestions when the page first loads?

Question

I am using Google Maps autocomplete service, which gives me predictions in a drop down when I start typing in the input box attached to this service.

However, in my app, I am first getting user input on a different page than where the autocomplete input box is. So when the user goes on to the page where autocomplete search box is, I want the user to see input search box already filled out with the input text I collected on the other page and more importantly also show the predictions in the drop down so the user just has to select the one that is correct.

I am able to show the input filled out in the box but not able to show predictions drop down.

I saw that Google Maps has get predictions method which I can store in an array may be. I tried searching for how to create drop down DOM elements from the array items but I could not find a decent answer.

Next thing I tried was simulating a click in the input box programmatically because when I manually click the input box, it drops down with the predictions. I could not make that to work either.

Please help me figure out how I can best go about it.

Here is the HTML, which is connected to Google's autocomplete code in the js file.

HTML

    <div class="input-group search-box">
      <input id="pac-input" class="form-control controls" type="text"
      value="{{ selectedText }}" placeholder="Find a location">
    </div>

Answer 1

I had some trouble with something like this earlier this year. You need to grab the first item of the select input. Useful answer here, about how to grab it on pressing enter (simulates a down-arrow press): Google maps Places API V3 autocomplete - select first option on enter.

Specifically, see the second answer. Here's a bit of the most useful code, though you'll have to modify it a bit. Remove the bit about simulating the enter button (the 13 below) and cause it to happen on page load instead after the value has been set.

    function addEventListenerWrapper(type, listener) {
        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
        // and then trigger the original listener.
        if (type == "keydown") {
            var orig_listener = listener;
            listener = function(event) {
                var suggestion_selected = $(".pac-item-selected").length > 0;
                if (event.which == 13 && !suggestion_selected) {
                    var simulated_downarrow = $.Event("keydown", {
                        keyCode: 40,
                        which: 40
                    });
                    orig_listener.apply(input, [simulated_downarrow]);
                }

                orig_listener.apply(input, [event]);
            };
        }

        _addEventListener.apply(input, [type, listener]);
    }

A simpler way might be to simulate a keyup event after page load, then trigger the autocomplete places_changed. This would be in jQuery:

$('#pac-input').val('My Passed City');
$('#pac-input').keyup(function() {
    // Can use this to pass over, or select manually 
    var firstResult = $(".pac-container .pac-item:first").text();
    // Fire the selection event
    google.maps.event.trigger(autocomplete, 'place_changed');
});
$('#pac-input').keyup();

See this answer for more about making sure the dropdown is triggered correctly, note the bit about passing arguments to the trigger function.