如何在模态中附加谷歌自动完成答案

【问题标题】：How to Append google auto complete inside modal如何在模态中附加谷歌自动完成
【发布时间】：2019-12-26 06:33:50
【问题描述】：

我正在尝试在模态弹出窗口中添加 Google autocomplete places，但我面临的问题是它附加到正文而不是模态，有什么办法可以将它附加到模态中？ Codepen Example

原因：当模态打开时，它滚动设置为隐藏，与 Bootstrap 模态相同，当“自动完成”附加到正文时，它会在滚动时改变它的位置

请见下文：

有没有办法解决这个问题，任何帮助将不胜感激。

谢谢

【问题讨论】：

如果需要帮助，请出示代码
嗨 Vipul，我添加了对原始 google 位置以及 codepen 示例的引用，如果您在搜索框中搜索某些内容，然后在获得结果后滚动，您会看到弹出框移位。 -感谢您的帮助
是的，我可以看到问题，搜索列表被附加到 HTML 正文中，这必须是它的默认行为，可能可以通过使用 JS 来解决这个问题

标签： javascript google-maps googleplacesautocomplete

【解决方案1】：

google 自动完成功能被附加到 HTML Body 标记中，并从那里跟踪指定输入搜索框的位置。

您可以在 #myModal 元素上添加滚动事件侦听器，然后跟踪输入的位置 #pac-input。

在initAutocomplete函数之后添加以下代码。

const modal = document.getElementById("myModal");
modal.onscroll = function(e) {
    const pacContainer = document.querySelector(".pac-container.pac-logo");
    let top = window.scrollY + document.getElementById("pac-input").getBoundingClientRect().top;
    pacContainer.style.top = `${top + 25}px`;
}

在 #myModal HTML 元素的滚动上，它计算 #pac-input 的顶部位置> 并将 25px（假定的输入高度）添加到 google 自动完成 div。

【讨论】：

感谢 Vipul，您的这种工作方法，我必须根据自己的需要稍微调整一下。
如果你接受它作为答案会很有帮助:-)