Я работал над этим часами, пытаясь понять, почему якобы простая автозаполнение не появлялась.
Оказывается, в моем коде входной элемент устанавливается на 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; }
Проблема заключается в том, что после того, как элемент был выбран из автозаполнения, автозаполнение остается видимым, я уверен, что есть лучший способ использовать автозаполнение.