Я работал над этим часами, пытаясь понять, почему якобы простая автозаполнение не появлялась.
Оказывается, в моем коде входной элемент устанавливается на autocompete="off", а стиль в pac-контейнере display: none.
Я могу изменить эти значения в DevTools, и он отлично работает, но я не могу понять, как и почему они устанавливаются в эти значения.
Моя автозаполнение настраивается в директиве Angular, например, где loadGmaps получает google api.
template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',
link: function($scope, elm, attrs){
loadGmaps().then(function(){
var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
console.log(autocomplete);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
$scope.position = {
lat: place.geometry.location.lat(),
lon: place.geometry.location.lng()
};
$scope.$apply();
});
});
--------------------- Update ------------------------- ---------------------
Надеюсь, что никто другой не смущен этим, autocomplete="off" немного вводит в заблуждение. Даже при autocomplete="off" автозаполнение все еще работает, так что это не проблема. Я переписываю css элемента .pac-container, который содержит результаты с
.pac-container { //this is a fix for google autocomplete not showing up
z-index: 10000 !important;
display: block !important;
}
Проблема заключается в том, что после того, как элемент был выбран из автозаполнения, автозаполнение остается видимым, я уверен, что есть лучший способ использовать автозаполнение.