将 Geocomplete 插件放入 Bootstrap 模态

Question

我已尝试使用 Geocomplete，但我的代码仍然无法正常工作。我想在 Bootstrap 模态中使用 Geocomplete。这是我的代码：

<script type="text/javascript">
  $("#cities").geocomplete();
</script>


<%= f.text_field :place, id: "cities", class: "form-control", type: "text" %>

Answer 1

您可以将 Geocomplete 插件添加到 Bootstrap 模式，但它看起来好像不起作用。在网页的其他地方试用该插件。如果在网页上正常，在模态里不正常，解决起来就很简单了。

Geocomplete 有效，但它是不可见的。您必须输入以下样式：

<style type="text/css">
  .pac-container{
    z-index: 99999999999999 !important;
  }
</style>

说明：自动完成列表在后台，您看不到它。如果你在这个 div class 上设置 z-index（你的视图中没有这个 class，它是由 Bootstrap 自动生成的），自动完成 div 会出现，因为现在它有比模态和其他东西更大的 z-index（更高的可见性优先级）。