Google Maps Autouzupełnianie Wynik w oknie dialogowym Modem Bootstrap

Question

Mam pole wejściowe Autokomplet Google Maps w oknie dialogowym modemu Bootstrap, a wynik autouzupełniania nie jest wyświetlany. Jeśli jednak naciśnie klawisz strzałki w dół, wybierze następny wynik autouzupełniania, więc wydaje się, że kod autouzupełniania działa poprawnie, tyle że wynik nie jest wyświetlany poprawnie. Może jest ukryty za modalnym dialogiem?

Oto screeny:

napisanie czegoś w polu autouzupełniania nic nie daje

naciskając strzałkę w dół klucz daje pierwszy wynik

a kod:

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

Próbowałem mojej mocy, aby rozwiązać ten problem na własną rękę, ale ponieważ ja nie znam html & CSS dla wyniku autouzupełniania (skontrolować elementem nic nie daje), jestem w utracone teraz. Dowolne pomaga?

Dzięki wcześniej!

Answer 1

Problem jest z z-index z .modal

użytkowania tego CSS markup:

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

Ponadto można sprawdzić ostateczną demo here

PS: dzięki @ lilina do tego demo na jsfiddle.com

Answer 2

Ogólnie rzecz biorąc, można po prostu podnieść indeks z .pac-container do wartości powyżej 1050 i nie będziesz potrzebował innych przesłonięć CSS.

Odkryłem, że ten problem istnieje również w oknach dialogowych interfejsu użytkownika jQuery. Tak więc w przypadku, gdy kończy się pomocne dla nikogo innego, oto szybkie odniesienia dla gdzie czasowniki modalne Bootstrap/jQuery UI żyć w z-samolotu:

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

Answer 3

Bootstrap na .modalz-index jest domyślnie 1050.

jQuery UI .ui-autocompletez-index jest domyślnie 3.

więc umieścić to na 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; 
} 

W. Orki zastanawiają się! :)

Answer 4

W moim scenariuszu wartość indeksu z .pac-kontenera zostanie zainicjowana i nadpisana do 1000, nawet jeśli ustawię w CSS. (być może przez Google API?)

mój brudny fix

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

Answer 5

Pracował z Bootstrap 3:

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

Answer 6

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

zrobił to dla mnie

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

Answer 7

Jeśli używasz programu Visual Studio, na strona style.css ustawić z-index dla .modal do 20.

np

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

Answer 8

ten pracował dla mnie.

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