javascript Google 地图 Places API V3 自动完成 - 在输入时选择第一个选项（并保持这种状态）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10772282/
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
Google maps Places API V3 autocomplete - select first option on enter (and have it stay that way)
提问by Ben
This question relates to the answer for this one: Google maps Places API V3 autocomplete - select first option on enter. Basically, it is to make the field use the first suggestion from the autocomplete list when the user presses enter. The answer for that question has a jsfiddle - http://jsfiddle.net/dodger/pbbhH/- which works except when the text field loses focus, the field value returns to the partially entered value.
这个问题与这个问题的答案有关：Google maps Places API V3 autocomplete - select first option on enter。基本上，当用户按下 Enter 键时，它使该字段使用自动完成列表中的第一个建议。该问题的答案有一个 jsfiddle - http://jsfiddle.net/dodger/pbbhH/- 除非文本字段失去焦点，否则字段值返回到部分输入的值。
For example, a user clicks in the input field and types 'ox', the autocomplete box pops up with some suggestions, and the user presses enter. The map is then changed to show the location of the first item from the autocomplete box (with a marker), and the value of the input field is changed to the first item from the autocomplete box. The user then clicks somewhere outside the field and the value of the input field returns to 'ox'.
例如，用户在输入字段中单击并输入“ox”，自动完成框会弹出一些建议，然后用户按 Enter。然后更改地图以显示自动完成框（带有标记）中第一项的位置，并且输入字段的值更改为自动完成框中的第一项。然后用户单击字段外的某处，输入字段的值返回到“ox”。
I would like the value of the input field to stay as the first autocomplete suggestion.
我希望输入字段的值保留为第一个自动完成建议。
回答by Mandar Limaye
Try this: http://jsfiddle.net/pbbhH/60/
试试这个：http: //jsfiddle.net/pbbhH/60/
Basically abstracted the selection logic to a new function selectFirstResult(). Then called this function on both pressing enter and losing focus on text.
基本上将选择逻辑抽象为一个新函数selectFirstResult()。然后在按下 Enter 和失去对文本的关注时调用此函数。
function selectFirstResult() {
infowindow.close();
var firstResult = $(".pac-container .pac-item:first").text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address":firstResult }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("input").val(firstResult);
}
});
}
EDIT:made minor change per @Ben's comment below.
编辑：根据@Ben 下面的评论做了一些小改动。
回答by Dtnand
This is right but if u press enter and you have already selected an item this will select the first. So use this code:
这是正确的，但是如果您按 Enter 并且您已经选择了一个项目，这将选择第一个。所以使用这个代码：
function selectFirstResult() {
infowindow.close();
if ( $('.pac-selected').length < 0){ // this line
var firstResult = $(".pac-container .pac-item:first").text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address":firstResult }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("input").val(firstResult);
}
});
}
}
