将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会出现，因为现在它的z-index比模态和其他东西更大（更大）能见度优先）。