谷歌地图API的地方自动完成V3 - 选择进入第一个选项 [英] Google maps Places API V3 autocomplete - select first option on enter

问题描述

我successfuly实现我的输入框，谷歌地图的地方V3自动完成功能按<一个href=\"http://$c$c.google.com/intl/sk-SK/apis/maps/documentation/javascript/places.html#places_autocomplete\">http://$c$c.google.com/intl/sk-SK/apis/maps/documentation/javascript/places.html#places_autocomplete.它工作得很好，但是我很想知道我怎么可以把它选择当用户presses进入建议的第一个选项。我想我会需要一些JS魔法，​​但我非常新的JS，不知道从哪里开始。

I have successfuly implemented Google Maps Places V3 autocomplete feature on my input box as per http://code.google.com/intl/sk-SK/apis/maps/documentation/javascript/places.html#places_autocomplete. It works nicely, however I would love to know how can I make it select the first option from the suggestions when a user presses enter. I guess I would need some JS magic, but I am very much new to JS and don't know where to start.

在此先感谢！

推荐答案

这是一个网站，我最近处理的实施自动完成，当我有同样的问题。这是我想出了解决办法：

I had the same issue when implementing autocomplete on a site I worked on recently. This is the solution I came up with:

$("input").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            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);

                        $(".pac-container .pac-item:first").addClass("pac-selected");
                        $(".pac-container").css("display","none");
                        $("#searchTextField").val(firstResult);
                        $(".pac-container").css("visibility","hidden");

                    moveMarker(placeName, latlng);

                }
            });
        } else {
            $(".pac-container").css("visibility","visible");
        }

    });
});

http://jsfiddle.net/dodger/pbbhH/

这篇关于谷歌地图API的地方自动完成V3 - 选择进入第一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！