Come attivare place_changed per Google posiziona il completamento automatico su Invio chiave

Question

Il clic sembra attivare l'evento e impostare i cookie ma premendo invio per inviare non vengono impostati i cookie e invece i reindirizzamenti della pagina senza i cookie.

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 posizione .search è una classe su più caselle di testo. C'è un pulsante di invio che prende i valori dai cookie e reindirizza (lato server)

Answer 1

Adattato da risposta di Jonathan Caulfield:

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

Answer 2

Forse non è la soluzione più facile da usare ma è possibile utilizzare JQuery per disabilitare la pressione del tasto Invio.

qualcosa di simile ...

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

Answer 3

Entrambe le risposte di cui sopra sono buone risposte per la questione generale di sparare una domanda quando l'utente preme "accedere." Tuttavia, ho riscontrato un problema più specifico durante l'utilizzo del completamento automatico di Google Places, che potrebbe essere stato parte del problema dell'OP. Perché l'evento place_changed faccia qualcosa di utile, l'utente deve aver selezionato una delle opzioni di completamento automatico. Se si attiva semplicemente 'place_changed', il blocco if() viene saltato e il cookie non viene impostato.

C'è una risposta molto buona per la seconda parte della domanda qui: https://stackoverflow.com/a/11703018/1314762

NOTA: la risposta di amirnissim, non è la risposta scelta, è quella di utilizzare per ragioni si incorrerà in se avete più di un input di completamento automatico sulla stessa pagina.

Answer 4

Ho riscontrato anche questo problema e ho trovato una buona soluzione. Nel mio sito web volevo salvare autocomplete.getPlace(). Formatted_address in un input nascosto prima dell'invio. Questo ha funzionato come previsto quando si fa clic sul pulsante di invio del modulo, ma non quando si preme il tasto Invio nella selezione nel menu a discesa del completamento automatico. La mia soluzione era la seguente:

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

Questa soluzione sembra funzionare bene.