Google maps Places API V3 自动完成 - 输入时选择第一个选项

Question

我已根据 http://web.archive.org/web/20120225114154/http://code.google.com:80/intl/sk-SK/apis/ 在我的输入框中成功实现了 Google Maps Places V3 自动完成功能 地图/文档/javascript/places.html 。它工作得很好，但是我很想知道当用户按下回车键时如何让它从建议中选择第一个选项。我想我需要一些 JS 魔法，但我对 JS 非常陌生，不知道从哪里开始。

提前致谢！

原文由 Daniel Grezo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在我最近工作的网站上实现自动完成时，我遇到了同样的问题。这是我想出的解决方案：

 $("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/

原文由 dodger 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个不发出可能返回错误结果的地理编码请求的解决方案：http: //jsfiddle.net/amirnissim/2D6HW/

每当用户在自动完成字段中点击 return 时，它就会模拟 down-arrow 按键。 ↓ 事件在 返回 事件之前触发，因此它模拟用户使用键盘选择第一个建议。

这是代码（在 Chrome 和 Firefox 上测试过）：

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script>
    var pac_input = document.getElementById('searchTextField');

    (function pacSelectFirst(input) {
        // store the original event binding function
        var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;

        function addEventListenerWrapper(type, listener) {
            // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
            // and then trigger the original listener.
            if (type == "keydown") {
                var orig_listener = listener;
                listener = function(event) {
                    var suggestion_selected = $(".pac-item-selected").length > 0;
                    if (event.which == 13 && !suggestion_selected) {
                        var simulated_downarrow = $.Event("keydown", {
                            keyCode: 40,
                            which: 40
                        });
                        orig_listener.apply(input, [simulated_downarrow]);
                    }

                    orig_listener.apply(input, [event]);
                };
            }

            _addEventListener.apply(input, [type, listener]);
        }

        input.addEventListener = addEventListenerWrapper;
        input.attachEvent = addEventListenerWrapper;

        var autocomplete = new google.maps.places.Autocomplete(input);

    })(pac_input);
</script>

原文由 Amir Nissim 发布，翻译遵循 CC BY-SA 3.0 许可协议