如何在模态内附加谷歌自动完成

Question

我正在尝试在模式弹出窗口中添加 Google autocomplete places ，但是我面临的问题是它附加到主体而不是模式，是否有任何方法可以将其附加到模式内部？ Codepen Example

原因：当模式打开时，其滚动设置为与Bootstrap模式相同的隐藏状态，并且当“自动完成”附加到主体时，它会在滚动时更改其位置

请参见以下内容：

有没有解决此问题的方法，我们将不胜感激。

谢谢

Answer 1

google自动完成功能将附加到 HTML正文 标签，并从那里跟踪指定输入搜索框的位置。

您可以在 #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自动填充div 添加25px（假定输入高度）。