Google自动填充API - 格式输出结果 [英] Google Autocomplete API - format output result
问题描述
我正在尝试实施Google Places API，所以这是我的代码：
I'm trying to implement Google Places API, so here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&location=0,0&radius=20000000&language=de"></script>
<script>
$(document).ready(function() {
var el = $('#street').attr("placeholder", "")
, autocomplete = new google.maps.places.Autocomplete( ( el.get(0) ), { types: ['geocode'] } );
el.bind("blur", function() {
// blur is triggered before place_changed, as well as focus... so this is not working as well
})
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
el.val(place.name); // this line is not working well - still default content showing !!!
});
})
</script>
</head>
<body">
<input type="text" id="street" style="width:400px;" />
</body>
</html>
Google自动填充功能正常，但我有一个要求 - 只显示街道姓名和号码而不是Google建议的完整地址。所以我可以通过在place_changed事件中运行 autocomplete.getPlace（）来获取所有信息 - 这没有问题。
Google Autocomplete works fine, however I have one of requirements - only show street name & number instead of full address suggested by Google. So I can get all information by running autocomplete.getPlace() at "place_changed" event - there are no problems with that.
问题是我无法使用自定义文本覆盖自动填充输入值 - 我试图在模糊，焦点， place_changed事件 - 仍然没有运气。请找一个我正在尝试的例子。另外 - 我需要避免文字闪烁，以使其绝对用户友好。有人可以帮助我尝试吗？
The problem is that I can't override autocomplete input value with my custom text - I've tried to do it within "blur", "focus", "place_changed" events - still no luck. Please find an example of what I was trying. Also - I need to avoid text flashing, to make it absolutely user-friendly. Could someone help me with my attempts?
JSFiddle： http://jsfiddle.net/8pGH2/
JSFiddle: http://jsfiddle.net/8pGH2/
推荐答案
我能够解决我的问题以下代码：
I was able to solve my problem with the following code:
$(document).ready(function() {
var el = $('#street').attr("placeholder", "")
, autocomplete = new google.maps.places.Autocomplete( ( el.get(0) ), { types: ['geocode'] } );
el.bind("blur", function() {
el.css("color", "#fff"); // this will prevent text flashing
})
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
el.val(place.name);
// this will override default Google suggestion
setTimeout(function() {
el.val(place.name);
el.css("color", "");
}, 0)
});
})
这篇关于Google自动填充API - 格式输出结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
