Question

我正在尝试将google地图自动填充输入添加到我的离子应用中。除非滚动，否则它的效果非常好。如图所示：

所以我尝试了不同的方法，比如改变 .pac-container 的位置，但它没有解决问题。当我检查页面时，似乎结果容器在页面末尾加载，因此不容易使块粘在输入栏上。

我已经到处搜索过，没有找到任何合适的解决方案？有人知道怎么做吗？（它实际上只是一个简单的代码：

    function initialize() {
            var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
        new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')), options);
    }

    initialize();

jsfiddle

由于

Answer 1

我有同样的问题。我的解决方案是：

$('#inputContainer').scroll(function(){
    //Set new top to autocomplete dropdown
    newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
    $('.pac-container').css('top', newTop + 'px');
  }
});

当容器滚动时，这会更新下拉位置。

Answer 2

当我在可滚动模式内的表单上实现自动完成时，我遇到了同样的问题。如果您只有一个自动完成对象，那么解决方案相对容易。

首先确保您元素的父级具有相对位置。

然后您需要选择.pac-container并将其附加到父级。

$("#autocomplete").parent()
    .css({position: "relative"})
    .append(".pac-container");

最后将.pac-container左侧和顶部位置设置在元素下方。这需要在带有！important 声明的样式表中完成，以确保 overrides 由Google代码设置的内联样式。
```
// these values will need to be calculated based on your layout
.pac-container {
    top: 40px !important;
    left: 0px !important;
}
```

如果您在一个页面上有多个自动完成对象，这显然不会起作用。幸运的是，我想出了一种方法来处理这种情况，最近在 jQuery plugin 中发布了它，旨在使自动填充地址表格变得轻而易举。

Answer 3

滚动

时，我得到了解决方案the example没有问题

function initAutocomplete() {
      //....codes...
       //....add this code just before close function...
    setTimeout(function(){ 
                $(".pac-container").prependTo("#mapMoveHere");
            }, 300);
}

https://codepen.io/gmkhussain/pen/qPpryg

Answer 4

我现在能够重现该问题，解决方案只是将position: relative添加到您的box和position: absolute输入的#autocomplete。

我得到了Google小组提供的the example解决方案。

我已更新your fiddle以匹配解决方案，但它是这样的：

您更新的CSS：

.box {
  position: relative;
  height: 200vh;
}

#autocomplete {
    width:350px;
    position: absolute;
}

Answer 5

由于我的输入字段位于“离子含量”内，因此我实现了Nicolas Pennesi 离子含量方法的答案：

onScroll($event) {
// his code here
}

谷歌地图自动完成，修复输入

5 个答案: