Google 放置自动完成下拉列表 "below" 屏幕

Question

我一直在编写 AngularJS 网络应用程序，google 放置自动完成自动生成的下拉代码导致它有时会超出 DOM。

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

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

Javascript AngularJS 控制器中的代码正在初始化放置自动完成：

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

当运行时，看起来像this. And if I open DevTools, we can see how it looks under the hood。第二张图，标有1的部分是我自己写的，是我用来自动补全的输入框。 2 是由 Google 的框架自动生成的代码。如您所见，它位于文档底部，就在关闭 body 标记之前，在 div 元素之外 (id visible-content) 里面是我的自动完成输入。

问题： 这最终会导致 google 自动完成的下拉菜单无法显示，因为输入字段可能太低，下拉菜单会放置在 "below" 屏幕上，并且屏幕不会变得可滚动，因为自动生成的代码在所有元素之外。

问题：如果输入字段太低，是否有一种干净的方法来防止此下拉菜单 "going below screen"？

Answer 1

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

In Long：Google 没有让我们对下拉菜单的位置有任何控制。 documentation 中没有关于屏幕放置的内容。

所以我们有两个选择：

使用 css 确保输入字段下方始终有空间。 margin-bottom: 190px; 例如。
使用 AutocompleteService 编写我们自己的下拉菜单作为备份。

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

Answer 2

您可以使用 CSS 将自动完成 window 放在任何您想要的地方， class 是 .pac-container .

例如：

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

Google 放置自动完成下拉列表 "below" 屏幕

Google Place Autocomplete dropdown falling "below" screen

html

javascript

jquery

google-places-api

angularjs