仅使用Google Places API完成地点名称 [英] Autocompleting only the place name with Google places API
问题描述
我已经成功安装了Google Places API的自动填充功能。
var input = document.getElementById('place_name');
var autocomplete = new google.maps.places.Autocomplete(input);
但是,自动填充文本框 place_name 一些街道,华盛顿州,华盛顿州,美国
但是我想只填写文本框的地名,例如在我的情况下 ABC
我该怎么办?
我试过
google.maps.event.addListener(autocomplete,'place_changed',function(){
var place = autocomplete.getPlace();
$('#place_name')。val place.name);
});
但它没有做任何事情。
帮助请...
我现在意识到我完全误解了这个问题。我以为这是你想要消毒的下拉框的内容。要更改搜索框的内容,只需添加
input.value = input.value.split '')[0];
到您的 place_changed
事件 - > 这个结构在将来是稳定的,但事实上他们实际上记录了我们可以信任的标记结构证明现在。
典型的 .pac-item
将看起来像这样,在这里搜索Los:
< div class =pac-item>
< span class =pac-item-query>< span class =pac-matched> Los< / span>
Altos< / span>< span> CA,美国< / span>
< / div>
这里与 CA
和美国
现在,你想避免。该任务只是减少 .pac-item
节点的内容,所以我们只保留所谓的预测的名称。自动完成搜索每次用户点击一个密钥时,您可以自行排除自动生成的预测列表输入
keyup
事件。需要一点延迟,所以我们实际上访问了最新的预测列表,而不是前一个:
input.onkeyup = function(e){
setTimeout(function(){
var places = document.querySelectorAll('。pac-item');
for(var i = 0; i< places.length; i ++){
var place = places [i];
//获取图标
var pac_icon = place.querySelector('。pac-icon' ).outerHTML;
//仅获取匹配的名称,包括用于精确匹配的标记,以粗体取消Los
var place_name_reduced = place.querySelector('。pac-item-query')。outerHTML ;
place.innerHTML = pac_icon + place_name_reduced;
}
},150);
}
在这里看到它 - > http://jsfiddle.net/8SGvR/
I have successfully setup autocomplete of Google Places API with
var input = document.getElementById('place_name');
var autocomplete = new google.maps.places.Autocomplete(input);
But that automatically fills the textbox place_name with full address like "ABC, Some Street, Washington, WA, United States" But I want to fill the textbox with only the place name e.g. ABC in my case. How I can do that?
I tried
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
$('#place_name').val(place.name);
});
but it didn't do anything. Help please...
I now realize I completely misinterpreted the question. I thought it was the content of the dropdown box you wanted to sanitize. To change content of the searchbox, just add
input.value=input.value.split(',')[0];
to your place_changed
event -> http://jsfiddle.net/9RkM9/
This is how google maps places organizes the results (predictions) in the dropdown box :
Google does not guarantee this structure to be stable in all future, but the fact they actually document the markup structure proofs we can trust it for now.
A typical .pac-item
will look like this, here searching for "Los" :
<div class="pac-item">
<span class="pac-item-query"><span class="pac-matched">Los</span>
Altos</span><span>CA, United States</span>
</div>
Here with CA
and United States
present, which you want to avoid. The task is simply to reduce the content of the .pac-item
node, so we only keep the name part of the socalled prediction. The autocomplete searches each and every time the user hits a key, so you can overrule the autogenerated list of predictions on your own input
keyup
event. There need to be a little delay, so we actually access the newest list of predictions, not the previous one :
input.onkeyup = function(e) {
setTimeout(function() {
var places = document.querySelectorAll('.pac-item');
for (var i=0;i<places.length;i++) {
var place = places[i];
//get the icon
var pac_icon = place.querySelector('.pac-icon').outerHTML;
//get the mathed name only, including markup for precise match, loke "Los" in bold
var place_name_reduced = place.querySelector('.pac-item-query').outerHTML;
place.innerHTML = pac_icon + place_name_reduced;
}
}, 150);
}
See it in action here -> http://jsfiddle.net/8SGvR/
这篇关于仅使用Google Places API完成地点名称的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!