Google Places 自动完成功能不起作用（在 Bootstrap 模式中）

Question

我试图在我的 React 应用程序中包含一个 google place 自动完成输入框。

我已按照此处的指南放置<input>文本字段，并初始化搜索框，如下所示：

export default class MySearch extends class Component {
    ...

    componentDidMount() {
        var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(-33.8902, 151.1759),
            new google.maps.LatLng(-33.8474, 151.2631));

        var input = document.getElementById('searchTextField');

        var searchBox = new google.maps.places.SearchBox(input, {
            bounds: defaultBounds
        });
    }
    render() {
        return (
            ...

            <input id="searchTextField"
                   type="text"
                   className="form-control"
                   placeholder="Search for a location"
            />
        );
    }
}

但我没有看到文本字段中出现任何建议。

我检查了“网络”选项卡，以查看在我键入时 API 请求是否被命中，并且当我键入时，我不仅看到请求，还看到来自 API 的响应，以及基于我的搜索词的匹配位置。

我不知道为什么收到的建议没有显示在我的输入框下方的下拉建议列表中。

提前致谢 ：）

更新

PS：我已将文本框放置在引导模式内。当我将完全相同的文本框放置在引导模式之外时，它的工作就像微风一样。

知道为什么文本框在模式内不显示建议吗？

Answer 1

这是一个样式问题，因为模式的 z-index > 下拉列表的 ( .pac-container's) z-index。使用以下 CSS 代码片段修复了该问题：

\n\n

.pac-container {\n    background-color: #FFF;\n    z-index: 2001;\n    position: fixed;\n    display: inline-block;\n    float: left;\n}\n.modal{\n    z-index: 2000;\n}\n.modal-backdrop{\n    z-index: 1000;\n}\xe2\x80\x8b\n

\n