Question

我正在使用google places autocomplete api，当我初始化自动完成元素autocomplete = new google.maps.places.Autocomplete($('#google_places_ac')[0], {})时，它会将.pac-container附加到正文。

我有一个可滚动的div，这个内容是这样的，所以会发生.pac-container定位为绝对的，当div滚动时它不会随之滚动。

有什么方法可以让.pac-container插入我的div而不是身体的末端？

Answer 1

这不是一个完美的解决方案，但它是我能找到的最好的

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

您可能还需要更改一些css

Contact

Answer 2

解决方法是在滚动时模糊输入字段。

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

Answer 3

您可以将谷歌地方 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

Answer 4

碰巧遇到了这个问题，同时试图找到解决同一问题的方法。

我最终使用了 MooTools JavaScript框架。

希望这可以帮助遇到相同问题的任何人。

    // 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'));
         }
    });

Answer 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; 
}

从一开始就获得此评论，我无法检查是否有用，但我会重复

把谷歌的地方pac-container放在div里面？

5 个答案: