Question

This question already has answers here:

Google maps Places API V3 autocomplete - select first option on enter (20 answers)

Closed 5 years ago.

这个问题涉及到对此问题的答案 : < a href=" https://stackoverflow.com/ questions/7866446/google- magles-places-api-v3-autcompet-select-f-first-option-on-ent" > Google 地图 Places API V3 自动完成 - 在输入时选择第一个选项。基本上, 是要让字段在用户按键进入时使用自动完整列表的第一个建议。这个问题的答案有一个jsfidle - < a href=" http://jsfiddle. net/dodger/pbbhH/ < a > - 。, 除非文本字段失去焦点, 字段值返回部分输入值。

例如,输入字段和类型 ox 中的用户单击,自动完整的框会弹出一些建议,用户按键会输入。然后对地图进行修改,以显示第一个项目的位置,从自动完整的框(带有标记)中显示第一个项目的位置,输入字段的价值则从自动完整的框中改为第一个项目。然后用户单击字段以外的某个地方,输入字段返回到 ox 。

我希望输入字段的价值作为第一个自动完成的建议留在原处。

Answer 1

尝试此选项 : < a href=" "http://jsfiddle.net/pbbhH/60/" rel=" noreferrer" >http://jsfiddle.net/pbbhH/60/

基本上将选择逻辑抽象为新函数 < 坚固> 选择FirstResult () 。然后将此函数调用为按下输入和丢失对文本的焦点。

 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: 对以下的 @ben s 评论略作改动。

Answer 2

This is right but if u press enter and you have already selected an item this will select the first. So use this code:

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);
    }
});
}   
}

友情链接