Google maps autocomplete, fix to the input

9
votes

I'm trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:

Position bug when scroll

So I tried different things like changing the position of .pac-container but it doesn't solve the problem. When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.

I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ? (It's actually just a simple code like this:

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

jsfiddle

Thanks

5
cssangularjsgoogle-mapsionic-frameworkautocomplete
I could not reproduce on your fiddle the autocomplete box looks fine on scrolling, which browser did you experience this issue? - Lucas Lazaro
Hi, here is an updated one: jsfiddle.net/GVdK6/268 I got the issue on every browser (so on my Android too). - RobinFrcd
Hi, any idea please ? :) - RobinFrcd
@RobinFrcd I see you've upvoted an answer, do you mind updating your answer with more specific examples? Been struggling with this for a long time.. - Henry

5 Answers

6
votes

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 update the dropdown position when container scrolls.

4
votes

I just encountered the same problem when I was implementing the Autocomplete on a form inside a scrollable modal. If you only have one Autocomplete object then the solution is relatively easy.

  1. First make sure that your element's parent has a relative position.

  2. Then you need to select the .pac-container and append it to the parent.

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

  3. Finally set the .pac-container left and top position to be below your element. This needs to be done in a stylesheet with the !important declaration to ensure it overrides the inline styles set by Google's code.

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

This obviously wont work if you have multiple Autocomplete objects on a single page. Luckily I figured out a way to handle that scenario and recently published it in a jQuery plugin designed to make autocompleting address forms a breeze.

2
votes

I got the solution check the example no issue with position bug when scroll

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

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

0
votes

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

I got the solution checking the example provided by the Google team.

I've updated your fiddle to match the solution, but it goes like this:

Your updated CSS:

.box {
  position: relative;
  height: 200vh;
}

#autocomplete {
    width:350px;
    position: absolute;
}
0
votes

Since my input field is inside "ion-content", I implemented Nicolas Pennesi 's answer with ion-content's method:

onScroll($event) {
// his code here
}