谷歌地方信息自动完成下拉菜单落"below"屏幕

Question

我一直在编写AngularJS web应用程序，谷歌会自动放置自动生成的下拉代码，有时会导致它脱离DOM。

用于Google Place自动完成的HTML代码定义输入：

<div id="visible-content">
<label>Google Places Autocomplete:</label>
<input id="searchTextField" style="width: 300px" />
</div>

AngularJS控制器内的Javascript代码初始化Place Autocomplete:

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

运行时，它看起来是这样的。如果我打开DevTools，我们可以看到它在引擎盖下的样子。在第二张图片上，标记为1的部分是我自己写的，这是一个用于自动完成的输入字段。2是由谷歌框架自动生成的代码。正如您所看到的，它在文档的底部，就在关闭body标记之前，在div元素(id

visible content问题：这最终导致谷歌自动完成的下拉列表无法显示，因为输入字段可能太低，下拉列表被放置在屏幕的"下方"，屏幕将无法滚动，因为自动生成的代码在所有元素之外。

问题：如果输入字段过低，是否有一种干净的方法可以防止此下拉列表"进入屏幕下方"？

Answer 1

简而言之：确保输入字段永远不会太低。

In Long：谷歌不会让我们控制下拉列表的位置。文档中没有任何关于在屏幕上放置的内容。

所以我们有两个选择：

1. 使用css确保输入字段下始终有空间。例如CCD_ 1
2. 使用AutocompleteService编写我们自己的下拉列表以进行备份

显然，2需要做更多的工作，但您也可以更好地控制外观和位置。

Answer 2

您可以使用CSS将自动完成窗口放置在任何您想要的位置，类别为CCD_ 2。

例如：

.pac-container {
top: 517px !important;
}