google places中的正确事件使用鼠标自动完成选择

我正在使用谷歌的自动完成api,就像在文档中一样,它可以正常工作
好的
但是,每次更改时,我都会使用ajax提交一个表单。
它工作得很好,但是当我使用autocomplete作为
鼠标(通过单击选择一个位置)。
它触发onchange并在设置位置之前提交表单

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

下面是一个例子:http://jsfiddle.net/8GnZB/2/

$(文档).ready(函数(){
$location_input=$(“#location”);
变量选项={
类型:['(城市)],
组件限制:{
国家:'是'
}
};
自动完成=新
google.maps.places.Autocomplete($location\u input.get(0),options);
$(“#搜索表单输入”)。更改(函数(){
var data=$(“#搜索_形式”).serialize();
/*序列化表单并将其发送到搜索视图*/
显示提交数据(数据);
返回false;
});
});
功能显示提交数据(数据){
$(“#结果”).html(数据);
}
<script type=“text/javascript”
src=”https://maps.googleapis.com/maps/api/js?libraries=places&传感器=真“&gt&lt/脚本>
<form id=“search\u form”action=“”method=“post”>地点:
<输入id=“location”name=“location”type=“text”/>
<br/>数据:
<输入id=“数据”name=“数据”type=“文本”/>
&lt/表格>已发送数据:
<div id=“结果”&gt&lt/部门>

到目前为止,我唯一能解决的问题是change()事件超时,但这有点难看

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

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

autocomplete=new google.maps.places.autocomplete($location\u input.get(0),options);

现在,您可以绑定事件place\u changed,在需要时触发该事件,此时您可以控制所需的任何内容

google.maps.event.addListener(自动完成,'place\u changed',function(){
var data=$(“#搜索_形式”).serialize();
console.log('blah')
显示提交数据(数据);
});

这里有一个活生生的例子
http://jsfiddle.net/8GnZB/7/

发表评论