web-dev-qa-db-fra.com

Comment déclencher un événement place_changed pour Google place la saisie semi-automatique sur la touche Entrée

Le clic semble déclencher l'événement et définir les cookies, mais appuyer sur Entrée pour soumettre ne définit pas les cookies et à la place la page redirige sans les cookies.

function locationAuto() {
        $('.search-location').focus(function () {
        autocomplete = new google.maps.places.Autocomplete(this);
        searchbox = this;

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var thisplace = autocomplete.getPlace();
            if (thisplace.geometry.location != null) {
                $.cookie.raw = true;
                $.cookie('location', searchbox.value, { expires: 1 });
                $.cookie('geo', thisplace.geometry.location, { expires: 1 });
            }
        });
});

L'emplacement .search est une classe sur plusieurs zones de texte. Il y a un bouton d'envoi qui prend les valeurs des cookies et des redirections (côté serveur)

autocompletegoogle-places
34
John Stephenson

Adapté de la réponse de Jonathan Caulfield:

$('.search-location').keypress(function(e) {
  if (e.which == 13) {
    google.maps.event.trigger(autocomplete, 'place_changed');
    return false;
  }
});
40
Marcelo

J'ai également rencontré ce problème et j'ai trouvé une bonne solution. Dans mon site Web, je voulais enregistrer l'autocomplete.getPlace (). Formated_address dans une entrée cachée avant la soumission. Cela a fonctionné comme prévu lorsque vous cliquez sur le bouton d'envoi du formulaire, mais pas lorsque vous appuyez sur la touche Entrée de la sélection dans le menu déroulant de la saisie semi-automatique. Ma solution était la suivante:

$(document).ready(function() {

    // Empty the value on page load
    $("#formattedAddress").val("");
    // variable to indicate whether or not enter has been pressed on the input
    var enterPressedInForm = false;

    var input = document.getElementById("inputName");
    var options = {
      componentRestrictions: {country: 'uk'}
    };
    autocomplete = new google.maps.places.Autocomplete(input, options);

    $("#formName").submit(function(e) {
        // Only submit the form if information has been stored in our hidden input
        return $("#formattedAddress").val().length > 0;
    });

    $("#inputName").bind("keypress", function(e) {
        if(e.keyCode == 13) {
            // Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.

            // We change this variable to indicate that enter has been pressed in our input field
            enterPressedInForm = true;
        }
    });

    // This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        // If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
        if(autocomplete.getPlace() !== undefined) {
            $("#formattedAddress").val(autocomplete.getPlace().formatted_address);
        }
        // If enter has been pressed, submit the form.
        if(enterPressedInForm) {
            $("#formName").submit();
        }
    });
});

Cette solution semble bien fonctionner.

5
Liran H

Les deux réponses ci-dessus sont de bonnes réponses à la question générale de tirer une question lorsque l'utilisateur appuie sur "Entrée". Cependant, j'ai rencontré un problème plus spécifique lors de l'utilisation de la saisie semi-automatique de Google Adresses, qui pourrait avoir fait partie du problème du PO. Pour que l'événement place_changed fasse quelque chose d'utile, l'utilisateur doit avoir sélectionné l'une des options de saisie semi-automatique. Si vous déclenchez simplement 'place_changed', le bloc if () est ignoré et le cookie n'est pas défini.

Il y a une très bonne réponse à la deuxième partie de la question ici: https://stackoverflow.com/a/11703018/1314762

REMARQUE: la réponse d'amirnissim, et non la réponse choisie, est celle à utiliser pour les raisons que vous rencontrerez si vous avez plusieurs entrées de saisie semi-automatique sur la même page.

5
Don McCurdy

Ce n'est peut-être pas la solution la plus conviviale, mais vous pouvez utiliser JQuery pour désactiver la touche Entrée.

Quelque chose comme ça...

$('.search-location').keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});
1
Jonny C