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

Posted 2023-03-05

【中文标题】谷歌地图自动完成，修复输入

【英文标题】：Google maps autocomplete, fix to the input

【发布时间】：2017-03-01 18:52:56

【问题描述】：

我正在尝试将谷歌地图自动完成输入添加到我的 ionic 应用程序中。它工作得很好，除非我滚动。如图所示：

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

我已经到处搜索了，没有找到合适的解决方案？有人知道怎么做吗？ （其实就是这么简单的代码：

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

jsfiddle

谢谢

【问题讨论】：

我无法在您的小提琴上重现自动完成框在滚动时看起来很好，您遇到过哪个浏览器这个问题？

嗨，这是一个更新的：jsfiddle.net/GVdK6/268 我在每个浏览器上都遇到了问题（我的 android 也是如此）。

嗨，有什么想法吗？ :)

@RobinFrcd 我看到你已经对答案投了赞成票，你介意用更具体的例子更新你的答案吗？纠结这个很久了..

【参考方案1】：

就我而言，我必须将 css 设置为 html,bodyoverflow-x:visible; 以使 pac-container 固定到输入字段。

【参考方案2】：

由于我的输入字段在“ion-content”内，我实现了Nicolas Pennesi 用 ion-content 的方法回答：

onScroll($event) 
// his code here

【参考方案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

【参考方案4】：

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

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

然后您需要选择 .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 中，旨在让自动完成地址变得轻而易举。

【参考方案5】：

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

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

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

【参考方案6】：

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

我得到了 Google 团队提供的解决方案检查 the example。

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

您更新后的 CSS：

.box 
  position: relative;
  height: 200vh;


#autocomplete 
    width:350px;
    position: absolute;

【讨论】：

您好，感谢您的回答，但是当我向 div 添加滚动时，问题就出现了：jsfiddle.net/GVdK6/272

似乎是因为div结果在HTML末尾弹出，与输入无关。我尝试了一些 DOM 修改，但我认为这不是解决方案。 ://