proper event in google places autocomplete select with mouse
You can use below code to listen click event
let input = document.getElementById('searchTextField'); // the input field id from html file
let autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', () => {
let place = autocomplete.getPlace();
console.log(place); // You will get complete data
// If you want to move your map center to the searched lat long position. Use below any one
// (with animation)
this.gmap.panTo({ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() });
// (without animation)
this.gmap.setCenter({ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() });
});
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/