richtige Ereignis in google places autocomplete wählen Sie mit der Maus

Ich bin mit google ' s autocomplete-api genau wie in den docs, und es funktioniert
fein.
Allerdings habe ich ein Formular vorgelegt, mit ajax jedes mal, wenn es änderungen .
Es funktioniert gut, aber wenn ich den autocomplete für die Lage mit
Maus (auswählen einer Stelle mit einem Klick).
Es löst den onchange und das Formular absendet, bevor Die Position eingestellt ist.

Wie kann ich verhindern, dieses Verhalten ?
Ich meine, reichen nach der Maus klicken Sie auf die Autovervollständigung.

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, die ich geschafft, so weit zu einem timeout auf der change() Ereignis, aber ist irgendwie hässlich.

InformationsquelleAutor maazza | 2013-06-17
  1. 33

    Um Ihr problem zu lösen müssen Sie zum binden der richtigen Veranstaltung für Ihre Eingabe, denken Sie daran, dass die Bibliothek Ihre eigenen Veranstaltungen.

    Das Objekt, das Sie verwenden, es ist AutoVervollständigen 

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

    Jetzt können Sie binden Sie das Ereignis place_changed die es auslösen, wenn Sie benötigt werden, in diesem Punkt können Sie kontrollieren, was Sie brauchen.

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

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

    • ausgezeichnet , ich versuchte dies auch, aber irgendwie habe ich es falsch verstanden , vielen Dank 😉
    • AutoVervollständigen.getPlace() geben Ihnen auch alle Informationen, die Sie benötigen, über die Lage der ausgewählten Benutzer in Ihrer callback-Funktion
    • Danke. es funktioniert.
    • Hier eine weitere Funktion kann verwendet werden, um die ausgewählten Daten autocomplete.getPlace()
    InformationsquelleAutor Jorge
  2. -1

    Um dieses problem zu lösen ,müssen Sie listener, die ermöglicht Ihnen die Auswahl von Orten auf der Maus klicken.

    Perfekt auf angular2+

    Hier ist der code 

       let input1=document.getElementsByTagName('input')[0];
   let autocomplete1 = new google.maps.places.Autocomplete(input1, {
    types: ["address"]
  });


  this.ngZone.run(() => { 
    autocomplete1.addListener('place_changed', function() {
      let place1=autocomplete1.getPlace();
        this.pickup=place1.formatted_address;              
        console.log(this.pickup);
  })
          })

    Stellen Sie sicher, dass Sie den gesamten code in ngOnInit()
    und auch import-ngZone Klasse und deklarieren Sie Sie im Konstruktor
    ansonsten ngZone zeigt Fehler.

    InformationsquelleAutor Prince
Schreibe einen Kommentar