Google Place Autocomplete下拉菜单位于“屏幕下方”

Question

我一直在编写AngularJS网络应用程序和谷歌地方自动完成自动生成的下拉代码导致它有时会超出DOM。

HTML代码定义用于Google Place Autocomplete的输入：

<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);

运行时，它看起来像this。如果我打开DevTools，我们可以看到how it looks under the hood。 在第二张图片上，标有 1 的部分由我自己写，这是我用于自动完成的输入字段。 2 是由Google框架自动生成的代码。正如您所看到的那样，它位于文档的底部，就在关闭 body 标记之前，以及div元素之外（id visible-content ），其中是我的自动完成输入。

问题：这最终导致Google自动填充的下拉列表无法显示，因为输入字段可能太低而下拉列表位于屏幕“下方”，并且屏幕不会变为可滚动，因为自动生成的代码是在所有元素之外。

问题：如果输入字段太低，是否有一种干净的方法可以防止此下拉菜单“进入屏幕下方”？

Answer 1

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

In Long：Google不会让我们控制下拉列表的位置。 documentation中没有关于屏幕上的位置的信息。

所以我们有两个选择：

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

显然2是更多的工作，但你也可以更好地控制外观和位置。