Подтвердить что ты не робот

Автозаполнение Google Адресов не отображается

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

Оказывается, в моем коде входной элемент устанавливается на 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;
            }

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

4b9b3361

Ответ 1

Для кого-либо еще, кто может застрять или испытывает трудности с этим, проигнорируйте значение "autocomplete =" no "и не используйте" display: block ", чтобы показать".pac-container ".

войдите в свой chrome devtools и убедитесь, что вы видите div .pac-container. установите z-index этого div в ваш css. Когда есть искомое значение, Google изменит отображение, чтобы блокировать и обрабатывать показ и скрытие, вам просто нужно беспокоиться о z-index.

Ответ 2

В другом случае, когда .pac-container не будет отображаться: когда u использует фиксированные позиционированные контейнеры, а u оставляет <body> без фактических относительных/статических дочерних элементов, <body> сворачивается до высоты 0 или настолько мал, что нижний край выше, чем там, где появится .pac-container. В таком случае вы можете видеть с помощью devtools, что pac-контейнер находится в правильном положении и имеет высоту, но не отображается.

body{min-height:calc(100vh)} может помочь.