jquery - 将 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 类上设置 z-index（你的视图中没有这个类，它是由 Bootstrap 自动生成的），自动完成 div 会出现，因为现在它比 modal 和其他东西有更大的 z-index（更大的优先级能见度）。