jquery - 将Geocomplete插件放入Bootstrap模式

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

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


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

最佳答案

您可以将Geocomplete插件置于Bootstrap模式中，但看起来似乎无法正常工作。在网页上的其他位置尝试插件。如果它可以在网页中正常运行，但不能在模式中正常运行，则解决方案非常简单。

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

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

说明：自动完成列表在后台，您看不到它。如果您在此div类上设置z-index（您的视图中没有该类，它是由Bootstrap自动生成的），则会显示自动完成div，因为它现在的z-index大于模式和其他内容（优先级更高）能见度）。