【问题标题】：Google Places autocomplete not working (in Bootstrap modal)Google Places 自动完成功能不起作用（在 Bootstrap 模式中）
【发布时间】：2017-05-26 06:02:18
【问题描述】：

我正在尝试在我的 React 应用中包含一个 google 地方自动完成输入框。

我已经按照guide here 放置了一个<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：我已将文本框放在引导模式中。当我在引导模式之外放置完全相同的文本框时，它就像轻而易举。

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

【问题讨论】：

标签： google-maps reactjs bootstrap-modal google-places-api

【解决方案1】：

DOM 参考（findDOMNode）

您不应该在 react 组件中选择具有 id 的 dom 元素。请改用 ref （参考）。在此处了解有关findDOMNode 的更多信息https://facebook.github.io/react/docs/react-dom.html#finddomnode

import { findDOMNode } from 'react-dom';

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 = findDOMNode(this.refs['searchTextField']);

        var searchBox = new google.maps.places.SearchBox(input, {
            bounds: defaultBounds
        });
    }
    render() {
        return (
            <input ref="searchTextField"
                   type="text"
                   className="form-control"
                   placeholder="Search for a location"
            />
        );
    }
}

【讨论】：

谢谢，但没有运气：\。你看我已经记录了document.getElementById('searchTextField')，我得到了这个：<input type="text" id="searchTextField" class="form-control" placeholder="Search for a location" autocomplete="off">

【解决方案2】：

这是一个样式问题，因为模态的 z-index > 下拉菜单的 (.pac-container's) z-index。使用以下 CSS sn-p 修复它：

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

【讨论】：

嗨，这个 sn-p 到底去哪儿了？这个 .css 文件是如何在 JSX 中被引用的？谢谢