Google displays autocomplete, corrects input

Question

I am trying to add Google Maps autocomplete input to my ionic application. It works very well, except when I scroll. As shown in the image:

Scrolling definition error

So I tried different things, such as changing the position of the .pac container, but this does not solve the problem. When I check the page, it seems that the result container is loading at the end of the page, so it’s not easy to get the block to stick to the input panel.

I already searched everywhere and did not find a suitable solution? Does anyone have an idea how to do this? (This is actually just simple code:

function initialize() { var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']} new google.maps.places.Autocomplete( (document.getElementById('autocomplete')), options); } initialize(); 

jsfiddle

Thanks in advance, Robin Fourcade.

Answer 1

I have the same problem. My solution was:

 $('#inputContainer').scroll(function(){ //Set new top to autocomplete dropdown newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight(); $('.pac-container').css('top', newTop + 'px'); } }); 

This is an update to the dropdown when scrolling through the container.

Answer 2

I only ran into the same problem when I implemented Autocomplete in a form inside a scrollable modal. If you have only one Autocomplete object, then the solution is relatively simple.

• First make sure your element parent has a relative position.

• Then you need to select the .pac container and add it to the parent.

   $("#autocomplete").parent() .css({position: "relative"}) .append(".pac-container"); 

• Finally, set the left and top position of the .pac container below your element. This must be done in the stylesheet with the declaration ! Important to ensure that it overrides the inline styles set by Google code.

   // these values will need to be calculated based on your layout .pac-container { top: 40px !important; left: 0px !important; } 

This obviously does not work if there are several Autocomplete objects on the same page. Fortunately, I figured out a way to handle this scenario and recently posted it in the jQuery plugin, designed to create address autocomplete, which forms a breeze.

Answer 3

I got a solution check example without problem with position error while scrolling

 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

Now I was able to reproduce the problem, the solution simply adds position: relative to your box wrapper and position: absolute to your #autocomplete input.

I got a solution testing an example provided by the Google team.

I updated my script to fit the solution, but it looks like this:

Your updated CSS:

 .box { position: relative; height: 200vh; } #autocomplete { width:350px; position: absolute; }