Как показать предложения автозаполнения места при первой загрузке страницы

Question

Я пользуюсь службой автозаполнения Карт Google, которая дает мне прогнозы в раскрывающемся списке, когда я начинаю вводить поле ввода, прикрепленное к этой службе.

Однако в моем приложении я впервые получаю ввод пользователя на другой странице, чем в поле ввода автозаполнения. Поэтому, когда пользователь переходит к странице, где находится окно автозаполнения, я хочу, чтобы пользователь увидел окно ввода ввода, которое уже было заполнено с введенным текстом, который я собрал на другой странице, и что еще более важно также показать прогнозы в раскрывающемся списке, чтобы пользователь просто должен выбрать тот, который является правильным.

Я могу показать ввод, заполненный в поле, но не отображающий прогнозы.

Я видел, что Google Maps получил метод предсказаний, который я могу хранить в массиве. Я попытался найти, как создавать выпадающие элементы DOM из элементов массива, но я не смог найти достойный ответ.

Следующее, что я пробовал, было программным образом имитировать щелчок в окне ввода, потому что, когда я вручную щелкаю окно ввода, он падает с предсказаниями. Я не мог заставить это работать.

Пожалуйста, помогите мне выяснить, как я могу лучше всего это сделать.

Вот HTML, который связан с кодом автозаполнения Google в файле js.

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

У меня были некоторые проблемы с чем-то вроде этого в начале этого года. Вам нужно захватить первый элемент выбранного ввода. Полезный ответ здесь, о том, как захватить его при нажатии enter (имитирует стрелку вниз): Google maps Places API V3 autocomplete - select first option on enter.

В частности, см. Второй ответ. Вот немного полезного кода, хотя вам придется немного его изменить. Удалите бит о симуляции кнопки ввода (13 ниже) и запустите его при загрузке страницы после того, как значение будет установлено.

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]); 
    } 

Более простой способ может быть, чтобы имитировать keyup событие после загрузки страницы, а затем вызвать автозаполнения places_changed. Это было бы в 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(); 

См this answer больше о том, чтобы убедиться, что выпадающий срабатывает правильно, отметим немного о передаче аргументов в функции триггера.