我已经为此工作了好几个小时,试图弄清楚为什么没有出现所谓的简单自动完成功能。
事实证明,在我的代码中,input元素被设置为autocompete="off",而pac-container上的样式为display: none。
autocompete="off"
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,该 元素将结果保存为
autocomplete="off"
.pac- container
.pac-container {//这是针对Google自动填充未显示的修复程序 z-index:10000!重要; 显示:阻止!重要; }
问题是,一旦从自动完成中选择了一个项目,自动完成就保持可见,我敢肯定,有一种更好的方式来使用自动完成。
对于可能对此感到困惑或有困难的其他人,请忽略“ autocomplete =“ no”“值,并且不要使用“ display:block”显示“ .pac- container”。
进入您的chrome devtools,并确保您可以看到.pac-containerdiv。在CSS中设置该div的z- index。当有一个搜索值时,谷歌将更改显示以阻止和处理显示和隐藏,您只需要担心z索引。
.pac-container