带有模态对话框 HTML5 的 Google 自动完成

问题描述

一直在使用谷歌的自动完成项目来使用它来查找场所。但是，每当我调用它时，pac 容器 div 都会附加到 html 的正文而不是模态对话框的对话框标签。

我尝试了很多东西，使用承诺，搞乱聚焦。但是，无论何时加载页面或聚焦到输入框时，加载自动完成功能的第一次迭代都会将容器设置为正文而不是输入框本身。我也试过把它拿出来放在其他地方，对谷歌网址本身做一个回调。

然而，一个简单的超时函数确实摆脱了 pac 容器，但我更愿意在不使用它的情况下解决这个问题。

Image of pac container when the dialog screen is loaded up

这是我的对话框代码示例。

<dialog id="myDialog>
   <div class="modal-body">
     <input id="searchBox" name="searchBox"/>
   </div>
</dialog>

<script>
  $(document).ready(function () {
    initAutocomplete();
  });
</script>

autocomplete.js

function initAutocomplete() {
  const input = document.getElementById("searchBox");
  const autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.addListener("place_changed",() => {
    var place = autocopmlete.getPlace();
    /* Rest of the code*/
  }

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）