css – 谷歌地图自动完成,修复输入

前端之家收集整理的这篇文章主要介绍了css – 谷歌地图自动完成,修复输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将google地图自动填充输入添加到我的离子应用中.除非滚动,否则它的效果非常好.如图所示:

Position bug when scroll

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

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

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

    initialize();

jsfiddle

谢谢

解决方法

我也有同样的问题.我的解决方案是:
$('#inputContainer').scroll(function(){
    //Set new top to autocomplete dropdown
    newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
    $('.pac-container').css('top',newTop + 'px');
  }
});

这会在容器滚动时更新下拉列表位置.

猜你在找的CSS相关文章