jQuery 谷歌中的适当事件用鼠标放置自动完成选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17153847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
proper event in google places autocomplete select with mouse
提问by maazza
I am using google's autocomplete api just like in the docs and it works fine. However I have a form submitted with ajax every time it changes . It works fine but when I use the autocomplete for the location with the mouse (choosing a place with a click). It trigger the onchange and submits the form before The location is set.
我正在使用 google 的自动完成 api，就像在文档中一样，它工作正常。但是，每次更改时，我都会使用 ajax 提交一个表单。它工作正常，但是当我使用鼠标对位置使用自动完成功能时（单击选择一个位置）。它触发 onchange 并在设置位置之前提交表单。
How can I block this behaviour ? I mean submit afterthe mouse click on the autocomplete.
我怎样才能阻止这种行为？我的意思是在鼠标点击自动完成后提交。
Here is a fiddle with an example : http://jsfiddle.net/8GnZB/2/
这是一个带有示例的小提琴：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>
The only work around I managed to work so far is a timeout on the change()event but is kinda ugly.
到目前为止，我设法解决的唯一解决方法是change()事件超时，但有点难看。
回答by Jorge
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_changedwhich it's trigger when you needed, in this point you can control whatever you need.
现在您可以绑定place_changed在您需要时触发的事件，此时您可以控制您需要的任何内容。
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/
这是一个活生生的例子 http://jsfiddle.net/8GnZB/7/
回答by Prince
To solve this problem ,you have to add listener which enables you to select places on mouse click.
要解决这个问题，您必须添加侦听器，使您可以通过鼠标单击来选择位置。
Perfectly work on angular2+
完美适用于 angular2+
Here is the code
这是代码
let input1=document.getElementsByTagName('input')[0];
let autocomplete1 = new google.maps.places.Autocomplete(input1, {
types: ["address"]
});
this.ngZone.run(() => {
autocomplete1.addListener('place_changed', function() {
let place1=autocomplete1.getPlace();
this.pickup=place1.formatted_address;
console.log(this.pickup);
})
})
Make sure to run the whole code in ngOnInit() and also import ngZone class and declare it in constructor otherwise ngZone shows error.
确保在 ngOnInit() 中运行整个代码，并导入 ngZone 类并在构造函数中声明它，否则 ngZone 会显示错误。
