一尘不染

Google地方信息自动填充未显示

angularjs

我已经为此工作了好几个小时,试图弄清楚为什么没有出现所谓的简单自动完成功能。

事实证明,在我的代码中,input元素被设置为autocompete="off",而pac-container上的样式为display: none

我可以在DevTools中更改这些值,并且效果很好,但是我不知道如何或为什么将这些值设置为这些值。

我的自动完成功能是在这样的Angular Directive中设置的,其中loadGmaps获取google api。

模板:“ <input id =“ google_places_ac” name =“ google_places_ac” type =“ text” class =“ input-block-level” />“,
链接:函数($ scope,elm,attrs){
    loadGmaps()。then(function(){

    var autocomplete = new google.maps.places.Autocomplete($(“#google_places_ac”)[0],{});
    console.log(自动完成);
    google.maps.event.addListener(自动填充,'place_changed',function(){
        var place = autocomplete.getPlace();
        $ scope.position = {
            纬度:place.geometry.location.lat(),
            lon:place.geometry.location.lng()
        };
        $ scope。$ apply();
    });
});

---------------------更新---------------------------- ------------------

希望没有人因此而误入歧途,这autocomplete="off"有点误导。即使使用autocomplete="off",自动完成功能仍然有效,因此这不是问题。我正在覆盖.pac- container元素的css,该 元素将结果保存为

.pac-container {//这是针对Google自动填充未显示的修复程序
    z-index:10000!重要;
    显示:阻止!重要;
}

问题是,一旦从自动完成中选择了一个项目,自动完成就保持可见,我敢肯定,有一种更好的方式来使用自动完成。


阅读 311

收藏
2020-07-04

共1个答案

一尘不染

对于可能对此感到困惑或有困难的其他人,请忽略“ autocomplete =“ no”“值,并且不要使用“ display:block”显示“ .pac-
container”。

进入您的chrome devtools,并确保您可以看到.pac-containerdiv。在CSS中设置该div的z-
index。当有一个搜索值时,谷歌将更改显示以阻止和处理显示和隐藏,您只需要担心z索引。

2020-07-04