Поместите google-места pac-container внутри div?

Я использую autocomplete api google, и когда я инициализирую элемент aut complete complete autocomplete = new google.maps.places.Autocomplete($('#google_places_ac')[0], {}), он добавляет .pac-container к телу.

У меня есть div, который прокручивается, что это содержимое находится в том, что происходит, когда .pac-container позиционируется как абсолютное, и когда прокрутки div не прокручиваются вместе с ним.

Есть ли способ, чтобы я мог вставить .pac-container внутри моего div, а не в конец тела?

Ответы

Ответ 1

Это не идеальное решение, но это лучшее, что я мог найти

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

вам может понадобиться изменить некоторые css, а также

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

Ответ 2

Работа вокруг будет состоять в том, чтобы размыть поле ввода при прокрутке.

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

Ответ 3

Вы можете поместить google places pac-container внутри div, чтобы проверить это решение

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

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

Ответ 4

Просто наткнулся на это, пытаясь найти решение той же проблемы.

Я закончил тем, что делал это, используя JavaScript-фреймворк MooTools.

Надеюсь, это поможет любому, кто сталкивается с той же проблемой.

    // Start Address is the address form input field
    // Add a focus to delay this being run
    $('StartAddress').addEvent('focus', function()
    {
         // Make sure the new location of the .pac-container doesn't already contain it
         if($$('.route-form fieldset .pac-container').length == 0)
         {
              // Use adopt() to move the .pac-container to its new location
              // This method will keep all relations between the element and Google Maps
              $$('.route-form fieldset')[0].adopt($$('.pac-container'));
         }
    });

Ответ 5

Это не идеальное решение, но лучшее, что я мог найти

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

вам может понадобиться изменить некоторые CSS

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

получить этот комментарий сначала я не могу проверить, полезно, но я повторю это