Cómo desencadenar el evento place_changed para Google coloca la función de autocompletar en la tecla Enter

Question

El clic parece desencadenar el evento y establecer las cookies, pero de pulsar ENTER para presentar no establece las galletas 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 }); 
      } 
     }); 
}); 

La .search-location es una clase en varios cuadros de texto. Hay un botón de envío que toma los valores de las galletas y las 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

Tal vez no

la solución más fácil de usar, pero se podía utilizar jQuery para desactivar el ingreso en pulsar una tecla.

Algo como esto ...

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

Answer 3

Tanto de las respuestas anteriores son buenas respuestas para la cuestión general de disparar una pregunta cuando el usuario presiona "entrar." 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://stackoverflow.com/a/11703018/1314762

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

Answer 4

He encontrado este problema también, 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.