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?

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?

Thanks before!