谷歌地方适当的事件自动完成选择鼠标

Question

我正在使用谷歌的自动完成API,就像在文档中一样,它工作正常.但是,每次更改时,我都会使用ajax提交表单.它工作正常,但当我使用鼠标自动完成位置(选择一个点击的地方).它触发onchange并在设置位置之前提交表单.

我怎么能阻止这种行为？我的意思是在鼠标点击自动完成后提交.

这是一个例子的小提琴: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>

我到目前为止唯一可以解决的工作是change()事件暂停,但有点难看.

Answer 1

要解决您的问题,您需要为输入绑定正确的事件,请记住该库有自己的事件.

您正在使用它的对象是自动完成的

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

现在,您可以place_changed在需要时绑定触发事件,此时您可以控制所需的任何内容.

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

这是一个实例 http://jsfiddle.net/8GnZB/7/