Google Map Places Auto-complete 被 jQuery Mobile 弹出窗口阻止

Posted 2023-05-09

【中文标题】Google Map Places Auto-complete 被 jQuery Mobile 弹出窗口阻止

【英文标题】：Google Map Places Auto-complete blocked by jQuery Mobile popup

【发布时间】：2015-05-20 12:19:48

【问题描述】：

看这张图更容易理解我的意思： http://postimg.org/image/fcmo6pbvp/

我试图让用户使用谷歌地图输入地址自动完成 JS 功能，如example。

它可以工作，但是自动完成文本字段被 jQuery Mobile 弹出窗口阻止，就像显示的图片一样。

html 看起来像这样：

            <li>

                <a href="#popupLocation" data-rel="popup" data-position-to="window"
                    class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-transition="pop">
                    <h3>Location</h3>
                    <p id="locationSelectionString">London, UK</p>
                </a>


                <div data-role="popup" id="popupLocation" data-theme="a" class="ui-corner-all">

                        <div style="padding:10px 20px;">
                            <h3 style="margin-top: 0px; margin-bottom: 0px;">Location</h3>
                            <hr>
                            <table >
                                <tr>
                                    <input id="locationSelectionInput" onFocus="geolocate()" type="text" name="location" value="" placeholder="Enter a location" data-theme="a" style="margin-top: 0px; margin-bottom: 0px;">
                                </tr>
                                <tr>
                                    <td >
                                        <button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocationCanceled();">Cancel</button>
                                    </td>
                                    <td >
                                        <button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocation();">OK</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                </div>
            </li>

如果有人能告诉我出了什么问题，我会很高兴。

顺便说一句，不要嘲笑我的代码，这是我的第一个 JS 应用：p

【问题讨论】：

你能用你的代码发布一个 jsfiddle 吗？

代码看起来很难看，但它是：jsfiddle.net/christinalam/L7xt97qc/1

【参考方案1】：

克里斯蒂娜为时已晚。我希望能帮助其他人解决这个问题。

我的解决方案就是在你的 css 文件中添加代码。

.pac-container
    z-index: 9999 !important;