【问题标题】:Google maps Places API V3 autocomplete - select first option on enter (and have it stay that way) [duplicate]Google maps Places API V3自动完成 - 在输入时选择第一个选项(并保持这种状态)[重复]
【发布时间】:2012-06-02 02:10:46
【问题描述】:

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

例如,用户在输入字段中单击并键入“ox”,自动完成框会弹出一些建议,然后用户按下回车键。然后更改地图以显示自动完成框中第一项的位置(带有标记),并且输入字段的值更改为自动完成框中的第一项。然后,用户单击字段外的某处,输入字段的值返回“ox”。

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

【问题讨论】:

    标签: javascript google-maps google-maps-api-3 autocomplete


    【解决方案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);
            }
        });   
     }
    

    编辑:根据@Ben 下面的评论进行了细微更改。

    【讨论】:

    • 哦!几乎明白了。所以现在的问题是如果他们键入几个字母然后在输入字段之外单击,它会选择自动完成列表中的第一个建议。我想要它,所以他们要么必须:使用鼠标从自动完成列表中选择,要么按 Enter 键选择第一个选项。
    • 很高兴听到 @Mubix 帮助您前进。接受 Mubix 给你的非常好的答案,尝试一些事情来做出你需要的改变,如果这不起作用,继续尝试自己解决。当你在做这项工作时,他可能会决定回来补充他的答案,但他可能不会。如果您在工作时遇到更多问题并卡住,请回来寻求帮助。但是,在您接受他的回答之前,只是向 Mubix 提出更多问题并期望他回答这些问题是不公平的。
    • 我很困惑。虽然 Mubix 的答案在技术上根据需要更改了该字段的值,但它还引入了我无法想象有人会想要的其他行为。如果我等到我们提出完全可行的解决方案后再将问题标记为已回答,这对 Stackoverflow 的信息存储库不是最好的吗?
    • @Ben:对 jsfiddle 进行了更改。基本上,添加了另一个条件来触发 selectFirstResult()。
    • 就是这样!非常感谢 Mubix。
    【解决方案2】:

    这是对的,但是如果你按下回车键并且你已经选择了一个项目,这将选择第一个。 所以使用这个代码:

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

    【讨论】:

    • 不是if ( $('.pac-selected').lenght &lt;= 0){ 吗?
    • 也应该是.length,而不是.lenght
    • 抱歉,刚刚更正
    猜你喜欢
    • 2017-09-06
    • 2012-05-24
    • 2011-12-23
    • 1970-01-01
    • 2013-04-09
    • 2012-08-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多