谷歌在引导模式对话框中映射自动完成结果

I have a Google Maps Autocomplete input field inside a Twitter Bootstrap modal dialog and the autocomplete result is not displayed. However, if I press the down arrow key, it selects the next autocomplete result, so it seems that the autocomplete code works correctly, only that the result is not displayed correctly. Maybe it's hidden behind the modal dialog?

在一个Twitter引导模式对话框中，我有一个谷歌映射自动完成输入字段，并且没有显示自动完成结果。但是，如果我按下向下箭头键，它会选择下一个自动完成的结果，所以似乎自动完成代码工作正确，只是结果没有正确显示。也许它隐藏在模态对话框后面?

Here's the screenshots :

这里的截图:

谷歌在引导模式对话框中映射自动完成结果 Typing something in the autocomplete field gives nothing

在自动完成字段中输入一些内容不会带来任何结果

谷歌在引导模式对话框中映射自动完成结果 Pressing the arrow down key gives the first result

按下箭头向下键会得到第一个结果

And the code :

和代码:

<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>

<script type="text/javascript">
$("#map_modal").modal({
    show: false
}).on("shown", function()
{
    var map_options = {
        center: new google.maps.LatLng(-6.21, 106.84),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-6, 106.6),
        new google.maps.LatLng(-6.3, 107)
    );

    var input = document.getElementById("keyword");
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo("bounds", map);

    var marker = new google.maps.Marker({map: map});

    google.maps.event.addListener(autocomplete, "place_changed", function()
    {
        var place = autocomplete.getPlace();

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
        }

        marker.setPosition(place.geometry.location);
    });

    google.maps.event.addListener(map, "click", function(event)
    {
        marker.setPosition(event.latLng);
    });
});
</script>

I've tried my best to solve this on my own, but since I don't know the html&css for the autocomplete result (inspect element gives nothing), I'm in a lost now. Any helps?

我已经尽我最大的努力来解决这个问题，但是由于我不知道html和css的自动完成结果(检查元素什么都不给)，我现在已经迷失了。任何帮助吗?

Thanks before!

谢谢之前!

8 个解决方案

#1

The problem is with the z-index of the .modal

问题是。modal的z索引

Use this CSS markup:

使用这个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;        
}

Also you can check the final demo here

你也可以在这里查看最终的演示

ps: thanks to @lilina for that demo on jsfiddle.com

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

#2

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

did it for me

为我做的

https://github.com/twbs/bootstrap/issues/4160

#3

Bootstrap's .modal z-index is by default 1050.

Bootstrap的.modal z-index默认为1050。

jQuery UI's .ui-autocomplete z-index is by default 3.

jQuery UI的. UI -autocomplete z索引默认为3。

So put this on the CSS:

把这个放到CSS里:

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

Works wonders! :)

能创造奇迹!:)

#4

Worked with Bootstrap 3:

曾与引导3:

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

#5

In general, you can just bump up the .pac-container z-index to anything above 1050 and you won't need the other CSS overrides.

一般情况下，您可以将.pac-container z索引提高到1050以上的任何值，并且您不需要其他的CSS覆盖。

I discovered that this problem also exists for jQuery UI dialogs. So in case it ends up being helpful to anyone else, here's a quick reference for where the Bootstrap/jQuery UI modals live in the z-plane:

我发现jQuery UI对话框也存在这个问题。因此，如果它最终对任何人都有帮助，这里有一个快速参考，关于引导/jQuery UI modals在z-plane中的位置:

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

#6

In my scenario the .pac-container 's z-index value will be init and override to 1000, even I set in CSS. (possibly by google API?)

在我的场景中，.pac-container的z索引值将是init并覆盖到1000，即使是我在CSS中设置的。(可能通过google API ?)

my dirty fix

我肮脏的修复

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

#7

This worked for me.

这为我工作。

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

#8

If you are using Visual Studio, on your style.css page set the z-index for .modal to 20.

如果你使用的是Visual Studio，你的风格。css页面将.modal的z索引设置为20。

e.g

如

.modal {
    z-index: 20 !important;
}

#1