Saisie semi-automatique de Google Place: Autoriser uniquement les adresses suggérées par la saisie semi-automatique

Question

J'ai un champ de saisie dans lequel un utilisateur peut entrer une adresse. J'utilise Place Autocomplete pour suggérer des adresses à l'utilisateur. L'emplacement est un champ obligatoire.

Ce que je veux est de s'assurer qu'un utilisateur peut seulement entrer une adresse suggérée par placer la saisie semi-automatique. Par exemple, ils ne peuvent pas soumettre le formulaire avec "asagasagaaa" comme emplacement.

EJS DOSSIER:

<input name="location" type="text" id="location"> 

JS DOSSIER:

$(document).ready(function() { 
    ... 
    var autocomplete = new google.maps.places.Autocomplete($('#location')[0]); 
    addLocationChangeListener(autocomplete); 
    ... 
    $("form").submit(function(e){ 
     doValidations(e, autocomplete); 
    }); 

}); 

addLocationChangeListener:

// When user changes location, update map coordinates 
function addLocationChangeListener(autocomplete) { 
    autocomplete.addListener('place_changed', function() { 
     console.log("PLACE CHANGED"); 
     var place = autocomplete.getPlace(); 
     console.log("PLACE: ", place); 
     console.log("---------------------"); 
     if(place && place.geometry) { 
      ... // save stuff 
     } 
     ... 
    }); // End Add Listener 
} 

Le problème que je vais avoir est qu'il semble comme $ ("# emplacement) .val() et autocomplete.getPlace() ne sont pas synchronisés, c'est-à-dire qu'ils n'ont pas toujours la même valeur

Ainsi, ce travail doens't

$("#location").on("blur", function() { 
     if(autocomplete.getPlace() === undefined) { 
      //display error, prevent form submission 
    } 
}); 

Par exemple, supposons que vous entrez dans la séquence suivante:

aaa (emplacement non valide)

Aucun événement lieu de changement sera déclenché. Le lieu est indéfini et $ ("# location") est "aaa". C'est bon.

19 ave Fairview (suppose que c'est un endroit Google suggère)

$ ("l'emplacement de #"). Val() est 19 ave Fairview. L'endroit est 19 Fairview ave. Tout va bien maintenant.

aaa (emplacement non valide) - Le problème est ici

$ ("l'emplacement de #") val() est aaa.. L'endroit est 19 Fairview ave. PROBLÈME!

Voir la discordance? Des idées sur la façon de résoudre ce problème?

Answer 1

Compris. J'ai utilisé setTimeout, donc c'est un peu un hack et je ne l'aime pas. Si vous avez une meilleure solution, faites le moi savoir.

$(document).ready(function() { 
    $("#location").on("blur", function() { 
    setTimeout(function() { 
     var locVal = $("#location").val(); 
     var place = autocomplete.getPlace(); 
     if(!place) { 
      var errMsg = locVal + " is not a valid location. Please select location from list."; 
      displayError($("#location"), errMsg); 
     } else if(place.formatted_address === locVal) { 
      console.log("MATCH"); 
     } else { 
      var errMsg = locVal + " is not a valid location. Please select location from list."; 
      displayError($("#location"), errMsg); 
     } 
    },200); 
    }); 
} 

// When user changes location, update map coordinates 
function addLocationChangeListener(autocomplete) { 
    autocomplete.addListener('place_changed', function() { 
    var place = autocomplete.getPlace(); 
     if(place && place.geometry) { 
      $("#location").val(place.formatted_address); // THis is key 
     } 
     ... 
    }); // End Add Listener 
}