首页 文章

谷歌 Map Places API V3自动完成 - 在输入时选择第一个选项（让它保持这种方式）[重复]

提问于
浏览 次
6

这个问题在这里已有答案：

这个问题与这个问题的答案有关：Google maps Places API V3 autocomplete - select first option on enter . 基本上，当用户按下回车键时，该字段使用自动完成列表中的第一个建议 . 该问题的答案有一个jsfiddle - http://jsfiddle.net/dodger/pbbhH/ - 除非文本字段失去焦点，否则字段值将返回到部分输入的值 .

例如，用户单击输入字段并键入“ox”，自动完成框会弹出一些建议，然后用户按Enter键 . 然后更改 Map 以显示自动完成框中第一个项目的位置（带有标记），输入字段的值将更改为自动完成框中的第一个项目 . 然后，用户单击字段外的某处，输入字段的值将返回“ox” .

我希望输入字段的值保留为第一个自动完成建议 .

javascript google-maps google-maps-api-3 autocomplete

2 回答

  • 1

    试试这个：http://jsfiddle.net/pbbhH/60/

    基本上将选择逻辑抽象为新函数 selectFirstResult() . 然后在按下输入和失去对文本的焦点时调用此函数 .

    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的评论在下面做了一些小改动 .

    回复于
  • 11

    这是正确的，但如果您按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);
    }
});
}   
}
    回复于

相关问题