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/