Put Google pac-Container in div?

Question

Ich benutze die Google Orte Autocomplete API und wenn ich das Auto-Vervollständigen-Element autocomplete = new google.maps.places.Autocomplete($('#google_places_ac')[0], {}) initialisieren, fügt es die .pac-container an den Körper.

Ich habe eine div, die scrollbar ist, dass dieser Inhalt ist in so was passiert, ist die .pac-container ist absolut positioniert und wenn der div scrollt es nicht mit ihm scrollen.

Gibt es eine Möglichkeit, die .pac-container in meinem div und nicht am Ende des Körpers eingefügt werden?

Answer 1

Eine Arbeit wäre, das Eingabefeld beim Scrollen zu verwischen.

$('insert-scrolling-container').on('scroll', function() { 
    $('#google_places_ac').blur(); 
}); 

Answer 2

Es ist keine perfekte Lösung, aber es ist die beste könnte ich

var addressInputElement = $('#yourInputElementId'); 
addressInputElement.on('focus', function() { 
    var pacContainer = $('.pac-container'); 
    $(addressInputElement.parent()).append(pacContainer); 
}) 

Sie kann erforderlich sein, um einige CSS ändern auch

.pac-container { 
    z-index: 9999999 !important; 
    top: 32px !important; //your input height 
    left: 0 !important; 
} 

Answer 3

Sie können Google Plätze setzen pac finden -Container innerhalb div diese Lösung überprüfen

function initAutocomplete() { 
     //....codes... 
     //....add this code just before close function... 
    setTimeout(function(){ 
       $(".pac-container").prependTo("#mapMoveHere"); 
      }, 300); 
} 

https://codepen.io/gmkhussain/pen/qPpryg