richtiges Ereignis in Google Places Autocomplete mit der Maus auswählen

Question

Ich verwende Google Autovervollständigung API genau wie in der Dokumentation und es funktioniert gut. Allerdings habe ich jedes Mal ein Formular mit Ajax eingereicht, wenn es sich ändert. Es funktioniert gut, aber wenn ich die Autovervollständigung für den Standort mit der Maus verwenden (einen Ort mit einem Klick auswählen). Es löst den Austausch aus und sendet das Formular vor dem Standort.

Wie kann ich dieses Verhalten blockieren? Ich meine senden nach der Mausklick auf die Autocomplete.

Hier ist eine Geige mit einem Beispiel: http://jsfiddle.net/8GnZB/2/

 $(document).ready(function() { 
     $location_input = $("#location"); 
     var options = { 
      types: ['(cities)'], 
      componentRestrictions: { 
       country: 'be' 
      } 
     }; 
     autocomplete = new 
google.maps.places.Autocomplete($location_input.get(0), options); 
     $("#search_form input").change(function() { 
      var data = $("#search_form").serialize(); 
      /* Serialize form & send it to the search view */ 
      show_submit_data(data); 
      return false; 
     }); 
    }); 

    function show_submit_data(data) { 
     $("#result").html(data); 
    } 

    <script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script> 
    <form id="search_form" action="" method="post" >location : 
     <input id="location" name="location" type="text" /> 
     <br/>data: 
     <input id="data" name="data" type="text" /> 
    </form>Sent data : 
    <div id="result"></div> 

Die einzige Arbeit, um so weit ist ein Timeout auf dem change() Ereignis ich es geschafft, zu arbeiten, aber ist irgendwie hässlich.

Answer 1

Um Ihr Problem zu lösen, müssen Sie das richtige Ereignis für Ihre Eingabe binden, denken Sie daran, dass die Bibliothek ihre eigenen Ereignisse haben.

Das Objekt, das Sie es verwenden sind ist die automatische Vervollständigung

autocomplete = new google.maps.places.Autocomplete($location_input.get(0), options); 

Jetzt können Sie das Ereignis place_changed die es den Trigger binden, wenn Sie benötigt werden, in diesem Punkt können Sie steuern, was Sie brauchen.

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    var data = $("#search_form").serialize(); 
    console.log('blah') 
    show_submit_data(data); 
}); 

Hier ist ein anschauliches Beispiel http://jsfiddle.net/8GnZB/7/