如何在模态中附加 google 自动完成

Question

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

原因：当模式打开时，它滚动设置为隐藏，与 Bootstrap 模式相同，当 "Auto Complete" 附加到正文时，它会在滚动时改变它的位置

请看下面：

有没有办法解决这个问题，我们将不胜感激。

谢谢

Answer 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 并向 google 自动完成添加 25px（输入的假定高度）div.

如何在模态中附加 google 自动完成

How to Append google auto complete inside modal

javascript

google-maps

googleplacesautocomplete