Google Autocomplete - Coller les résultat à l'input

Par Djokx, il y a 9 ans

Javascript

Bonjour,
Je suis en train d'implémenter le module Google Maps Autocomplete à mon app Ionic (sous angular du coup) et je bloque un peu.
L'API fonctionne très bien, sauf lorsque la fenêtre de résultat est sortie puis que je scroll.
Idéalement, je souhaiterai que mes résulats restent sous l'input, même après un scroll.

Voilà en gros mon code actuel pour pouvoir avoir un aprçu du bug. Il suffit d'entrer un début de lieu puis de scroller: jsfiddle

J'ai essayé de jouer sur les positions mais ça ne suffit ici pas puisque le dvi de résultat ressort à la fin de l'HTML et non juste après son "input parent". J'ai donc essayé de moidifier le DOM en cours de route mais ça ne semble pas non plus être la solution.

Quelqu'un pourrait-il me donner un coup de main ?

Merci d'avance,
Djokx

2 réponses

PhiSyX, il y a 9 ans

Yop.

Pourquoi tu ne recalcules pas les positions de l'élément .pac-container par rapport à l'élément #autocomplete?

Lorsque tu scroll l'élément .box, tu récupères les positions+tailles (avec .getBoundingClientRect(), tu as juste besoin de la position top et de la taille height) de l'élément #autocomplete. Puis tu défini la position top, qui est la somme de gbcRect.top + gbcRect.height, à l'élément .pac-container.

(gbcRect = le résultat de #autocomplete.getBoundingClientRect() ^^)

Djokx, il y a 9 ans

Salut,
Parfait, c'était en effet pas très compliqué et ça marche super bien, merci ! Il fallait juste que je trouve l'existence de on-scroll et le tour et joué !

Merci !