proper event in google places autocomplete select

Question

I am using google's autocomplete api just like in the docs and it works fine. However I have a form submitted with ajax every time it changes . It works fine but when I use the autocomplete for the location with the mouse (choosing a place with a click). It trigger the onchange and submits the form before The location is set.

How can I block this behaviour ? I mean submit after the mouse click on the autocomplete.

Here is a fiddle with an example : 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>

The only work around I managed to work so far is a timeout on the change() event but is kinda ugly.

Answer 1

To solve this problem ,you have to add listener which enables you to select places on mouse click.

Perfectly work on angular2+

Here is the 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);
  })
          })

Make sure to run the whole code in ngOnInit() and also import ngZone class and declare it in constructor otherwise ngZone shows error.

Answer 2

To solve your problem you need to bind the correct event for your input, remember that library have their own events.

The object that you're using it's autocomplete

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

Now you can bind the event place_changed which it's trigger when you needed, in this point you can control whatever you need.

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

Here's a live example http://jsfiddle.net/8GnZB/7/