Changer la valeur de la zone de texte d'un autocomplet google map

Question

J'ai le code javascript suivant qui fait une autocomplétion google map sur différentes zones de texte d'entrée qui sont des parties d'une adresse.

function startAutoComplete() {
    var address = document.getElementById("addressId");
    var city = document.getElementById("cityId");
    var state = document.getElementById("stateId");
    var zip = document.getElementById("zipId");

    //option for autocomplete
    var option = {types: ['geocode'], componentRestrictions: {country: 'us'}};

    //autocomplete for address textbox
    autocomplete = new google.maps.places.Autocomplete(address, option);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();

        //parses the result object and populates the other textboxes accordingly
        for(i=0; i<place.address_components.length; i++)
        {
            if(place.address_components[i].types[0] == 'locality')
            city.value = place.address_components[i].long_name;

            if(place.address_components[i].types[0] == 'administrative_area_level_1')
            state.value = place.address_components[i].short_name;

            if(place.address_components[i].types[0] == 'postal_code')
            zip.value = place.address_components[i].long_name;
        }

        /* Here is the PROBLEM */
        address.value = place.name;

    });

Cependant, lorsque j'essaie de mettre à jour la zone de texte qui est remplie automatiquement avec une version abrégée de l'adresse complète (donc ici juste le numéro et le nom de la rue). La valeur de la zone de texte de l'adresse complète ne change pas. J'ai essayé d'utiliser jquery et de définir l'attribut de valeur avec setAttribute() sur la zone de texte. Qu'est-ce que je fais de mal ?

Answer 1

Le moyen le plus simple que j'ai trouvé pour modifier par programme la valeur d'une entrée de complétion automatique est de réinitialiser le champ de saisie.

autocomplete = new google.maps.places.Autocomplete(address, option);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
   // populate your other text fields
   ...
   // change the value of your autocomplete
   address.value = place.name;
   // reinitialize with new input value
   autocomplete = new google.maps.places.Autocomplete(address, option);
}

Answer 2

L'objet Autocomplete possède quelques écouteurs d'événements peu évidents. En réalité, lorsque vous exécutez votre code, il modifie la valeur, puis l'objet Autocomplete la modifie à nouveau très rapidement ! Pour tester cela, ajoutez alert(); après votre address.value = place.name; ligne. Vous pouvez le cajoler pour qu'il conserve votre valeur si vous ajoutez une ligne setTimeout() qui fixe la valeur avec un délai de 1ms. Mais lorsque vous quittez le champ, la fonction Autocomplete blur se déclenche, et votre adresse est à nouveau écrasée. Vous pouvez résoudre ce problème avec une seule ligne :

address.addEventListener('blur', function() { address.value = place.name; });

Cela prend en charge le premier cas également, de sorte que vous n'aurez même pas besoin d'ajouter un fichier setTimeout() . Remplacez la ligne de définition de la valeur par cet écouteur d'événements, qui remplacera la fonction de rappel de la complétion automatique qui définit le texte chaque fois qu'elle est activée.

Answer 3

J'ai trouvé une solution très temporaire. Il semble que si vous créez délibérément une erreur, l'autocomplétion de Google Maps sera dissociée de la zone de texte originale et les zones de texte originales apparaîtront avec la valeur mise à jour. Ce n'est pas vraiment une solution mais c'est un début.

//Created this variable that stores the pac-container
var element = document.getElementsByClassName("pac-container");

//inside the addListener() function I added this to create a DOM error
element[0].childNodes[0].childNodes[0].removeChild();

Le javascript génère une erreur mais il me permet au moins de mettre ce que je veux dans la zone de texte en utilisant '.value'.

Encore une fois, ce n'est pas une solution mais un début. J'espère que nous trouverons une meilleure solution.

Answer 4

Comment cloner l'élément et le remplacer par le même, puis appeler de nouveau initialze.

Eh bien, quelque chose comme ça. Ça a marché pour moi dans le passé.

$("#Id").replaceWith($("#Id").clone());
initialize();

ici initailize est la méthode qui est appelée lorsque le dom se charge google.maps.event.addDomListener(window, 'load', initialize) ; dans votre cas cela peut être différent