Javascript Google Maps自动完成引导模式对话框中的结果

我在Twitter引导模式对话框中有一个Google Maps自动完成输入字段，自动完成结果不显示。但是，如果我按下向下箭头键，它会选择下一个自动完成结果，因此自动完成代码似乎工作正常，只是结果显示不正确。也许它隐藏在模态对话框后面

以下是截图：

在“自动完成”字段中键入内容不会产生任何效果

按向下箭头键给出第一个结果

以及守则：

<div class="modal hide fade" id="map_modal">
<div class="modal-body">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <div class="control-group">
        <label class="control-label" for="keyword">Cari alamat :</label>
        <div class="controls">
            <input type="text" class="span6" name="keyword" id="keyword">
        </div>
    </div>
    <div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

×
Cari alamat：

$（“#映射模式”）.modal({
节目：假
}).on（“显示”，函数（）
{
变量映射_选项={
中心：新google.maps.LatLng（-6.21106.84），
缩放：11，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map\u画布”），map\u选项）；
var defaultBounds=new google.maps.LatLngBounds(
新的google.maps.LatLng（-6106.6），
新google.maps.LatLng（-6.3107）
);
var输入=document.getElementById（“关键字”）；
var autocomplete=new google.maps.places.autocomplete（输入）；
自动完成。绑定到（“边界”，映射）；
var marker=new google.maps.marker（{map:map}）；
google.maps.event.addListener（自动完成，“地点更改”，函数（）
{
var place=autocomplete.getPlace（）；
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（15）；
}
标记器.设置位置（位置.几何.位置）；
});
google.maps.event.addListener（映射，“单击”，函数（事件）
{
标记器设置位置（事件锁定）；
});
});

我自己已经尽力解决了这个问题，但是由于我不知道自动完成结果的html和css（inspect元素什么都不给出），我现在不知所措。有什么帮助吗

---

谢谢你

问题在于

.modal

使用此CSS标记：

.pac-container {
    background-color: #FFF;
    z-index: 20;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 20;   
}
.modal-backdrop{
    z-index: 10;        
}​

您也可以查看最终演示

---

ps:感谢@lilina在jsfiddle.com上的演示

一般来说，您只需将.pac容器z-index提升到1050以上，就不需要其他CSS覆盖

我发现jQueryUI对话框也存在这个问题。因此，如果它最终对其他人有帮助，这里有一个引导/jQuery UI模型在z平面中的位置的快速参考：

jQuery UI Dialog - z-index: 1001
Bootstrap Modal - z-index: 1050

---

引导的

.modal

z-index

默认为1050

jQuery UI的

.UI自动完成
z-index
默认为3

所以把这个放在CSS上：

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.ui-autocomplete {
    z-index: 1051 !important;
}

创造奇迹！：）
 在我的场景中，.pac容器的z-index值将是init并覆盖到1000，即使我在CSS中设置了。（可能是通过谷歌API？）

我的肮脏安排

$('#myModal').on('shown', function() {
     $(".pac-container").css("z-index", $("#myModal").css("z-index"));
}

使用Bootstrap 3：

.pac-container {
  z-index: 1040 !important;
}

是为我做的

如果您使用的是Visual Studio，请在
style.css
页面上将
的
z-index
设置为20

e、 g

这对我有用

                   var pacContainerInitialized = false; 
                    $('#inputField').keypress(function() { 
                            if (!pacContainerInitialized) { 
                                    $('.pac-container').css('z-index','9999'); 
                                    pacContainerInitialized = true; 
                            } 
                    }); 

我花了2,3个小时来挖掘google places API下拉z索引的错误。
我终于找到了这个。
只需将此代码粘贴到JS脚本的顶部，并更新输入id名称

var pacContainerInitialized = false;
$("#inputField").keypress(function() {
  if (!pacContainerInitialized) {
    $(".pac-container").css("z-index", "9999");
    pacContainerInitialized = true;
  }
});

完整参考链接。
多亏了乔塔姆。
我取得了一些进步，但遇到了困难。我会解释我的发现，希望能帮助其他人解决你的问题。我重新排列了文本框，看起来自动完成不仅在模式后面，而且在灰色区域后面（查看此演示），更改z索引是无效的。我还了解到这些建议在一个名为pac container的类的div中，因此我将其颜色更改为绿色以进行演示。为什么所有这些都是必需的？我知道是的，但为什么？此外，这将使我的模式远，引导静态导航栏现在是它。替代品？@MarcM。您使用的是什么版本的引导？我想如果你打开一个新的问题，把你的问题的全部细节都提出来会更好。我发现这把我的模型放在导航栏后面了，看起来不对劲。尝试将.pac容器的z索引更改为1050@JeffFinn好的，你可以打开一个新问题，我可以尝试帮助你，你必须检查这是引导2，你使用相同的版本吗？如果是这样的话，我看不出对答案投反对票的原因，正如你所看到的，它帮助了一些人。pac容器{z-index:1070；}是你唯一需要的东西。如果你的页面中有.navbar，它们有一个不同的z-Index，而不是改变所有的引导z-Index，也可以在gmap上做z-Index。GeoComplete.jsp也会出现此问题如果这对您不起作用，可能是因为.ui autocomplete不存在。取而代之的是，将它与接受的答案结合起来，并执行一个.pac容器{z-index:1051；}，它比预期的答案干净得多，对其他代码的影响也小得多。谢谢你的答案，我也将它改为1050。这很有帮助，尽管在较新的引导中，事件是“show.bs.modal”。很有效！您可能需要根据css增加z索引值。这在primefaces上对我有效，我有这样的映射：这个回答修复了错误。我需要将其更改为9999，但它有效。（Bootstrap 4）如果你像我一样好奇，
.pac容器
是位置自动完成的容器，而不是任何与Bootstrap相关的容器。我的模式不是来自Twitter引导，所以我很难理解哪个CSS真正重要（其他答案有多个CSS部分）。非常好用，模式和背景仍然在标题和侧边菜单上，谢谢
.modal {
    z-index: 20 !important;
}

                   var pacContainerInitialized = false; 
                    $('#inputField').keypress(function() { 
                            if (!pacContainerInitialized) { 
                                    $('.pac-container').css('z-index','9999'); 
                                    pacContainerInitialized = true; 
                            } 
                    }); 

var pacContainerInitialized = false;
$("#inputField").keypress(function() {
  if (!pacContainerInitialized) {
    $(".pac-container").css("z-index", "9999");
    pacContainerInitialized = true;
  }
});