Le titre suggère que je construis un site Web mobile avec JQuery Mobile (1.3.0) et j'essaie de mettre en œuvre Google Places Autocomplete (API V3) pour aider l'entrée utilisateur des données de localisation.
L'autocomplete fonctionne correctement sur le périphérique de bureau, mais pas lorsqu'il est utilisé sur un périphérique mobile (je n'ai été testé que sur iOS 6).
Lorsqu'il est utilisé sur l'appareil mobile, la liste déroulante des emplacements pertinents apparaissent, mais simplement disparaître lorsque vous appuyez sur une seule sans charger la sélection sur la carte.
J'ai regardé autour de moi et j'ai vu des solutions qui mirent l'index z de
.pac-conteneur
En tant que coupable (voir: http: //osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html ).
J'ai mis en œuvre ces correctifs mais en vain, et je ne suis pas convaincu que z-index est le problème car je peux voir que l'élément sélectionné change à son état: pressé sur mobile.
S'il vous plaît si quelqu'un a des suggestions que je suis toutes les oreilles, vous avez besoin de plus de détails laissez-moi savoir.
5 Réponses :
Après de nombreuses cheveux tire, j'ai trouvé le problème pour être la bibliothèque "FastClick" que j'ai ajoutée à mon projet.
@saravanan Shanmugam souligne dans ce commentaire https://stackoverflow.com/a/16932543/1177832 << / p>
fastclick semble interférer avec l'autocomplete. Voir également le lien ci-dessus pour la solution de contournement qu'il a ajouté pour obtenir les deux pour jouer sympa.
Merci Daniel. Mais la solution que j'ai donnée a un impact sur la performance.
J'ai modifié la bibliothèque FastClick Little Bit pour accomplir cela. P>
J'ai d'abord ajouté un paramètre à FastClick constructeur, où défautLLCLS code> sera les éléments qui ne doivent pas implémenter fastclick . P> new FastClick(document.body, "pac-item");
Merci, je n'ai pas encore eu la chance de regarder de plus près votre solution - mais heureux d'être sur la bonne voie!
Merci beaucoup!!!! C'est la meilleure réponse la plus rapide que j'ai trouvée jusqu'à présent sur ce sujet. Fonctionne comme un charme maintenant sur ios
La réponse de Saravanan est un peu excentrée. Pour fixer le conflit avec FastClick et PAC, ajoutez la catégorie STRAND> STRANDCLICK STRAR> à la fois PAC-PAC-Item Strong> et tous ses enfants. $(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Ce sera performances d'impact négatifes
Il y a un patch pour FastClick qui le fait bien fonctionner avec Google Places Autocomplete. Voir Cette réponse :)
J'ai aussi rencontré ce bogue et j'ai déterminé que FastClick soit le coupable. J'allais à l'origine aller avec la réponse de Devin Smith, mais l'avertissement de Epegzz sur les mutationvents étant obsolète m'a conduit à var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);