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

Question

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

事实证明，在我的代码中，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！重要；
    显示：阻止！重要;
}

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

Answer 1

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

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