remove - google maps autocomplete example

Cómo activar el evento place_changed para Google lugares autocompletar en la tecla Entrar

Question

El clic parece disparar el evento y establecer las cookies, pero presionar enter para enviar no establece las cookies y en su lugar la página redirige sin las 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 });
            }
        });
});

El .search-location es una clase en múltiples cuadros de texto. Hay un botón de envío que toma los valores de las cookies y redirecciones (lado del servidor)

Answer 1

Adaptado de la respuesta de Jonathan Caulfield:

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

Answer 2

Ambas respuestas son buenas respuestas para la pregunta general de disparar una pregunta cuando el usuario presiona "enter". Sin embargo, me encontré con un problema más específico al usar Autocompletar de Google Places, que podría haber sido parte del problema del OP. Para que el evento place_changed haga algo útil, el usuario debe haber seleccionado una de las opciones de autocompletar. Si acaba de activar ''place_changed'', el bloque if () se omite y la cookie no está configurada.

Hay una muy buena respuesta a la segunda parte de la pregunta aquí: https://.com/a/11703018/1314762

NOTA: la respuesta de amirnissim, no la respuesta elegida, es la que se debe usar por razones que se encontrará si tiene más de una entrada de autocompletar en la misma página.

Answer 3

Tal vez no sea la solución más fácil de usar, pero podría usar JQuery para desactivar la tecla Intro.

Algo como esto...

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

Answer 4

También me he encontrado con este problema y se me ocurrió una buena solución. En mi sitio web, quería guardar autocomplete.getPlace (). Formatted_address en una entrada oculta antes del envío. Esto funcionó como se esperaba al hacer clic en el botón Enviar del formulario, pero no al presionar la tecla Intro en la selección en el menú desplegable de autocompletar. Mi solución fue la siguiente:

$(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();
        }
    });
});

Esta solución parece funcionar bien.