javascript - 谷歌中的适当事件用鼠标放置自动完成选择

Question

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

如何阻止这种行为？ 我的意思是在鼠标点击自动完成之后提交。

这是一个带有示例的 fiddle :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

要解决您的问题，您需要为您的输入绑定(bind)正确的事件，请记住库有自己的事件。

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

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

现在你可以绑定(bind)事件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/