仅允许从 Google 地图 API 自动完成（城市）中选择的值

Question

我的输入中有自动完成城市的代码。

google.maps.event.addDomListener(window, 'load', function () {
    let input = document.getElementById('where-input');
    let autocomplete = new google.maps.places.Autocomplete(input, {types: ['(cities)']});
});

我只想允许来自谷歌地图自动完成的值，否则发送明确的输入。你能帮助我吗？谢谢

编辑： 我找到了这个解决方案，但它不适用于提交，只能用于输入，你能帮我吗？

$(function () {
    var pac_input = document.getElementById('where-input');

    (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==="submit") {
                console.log("ghfj");
            }
            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, {types: ['(cities)']});

    })(pac_input);
});

Answer 1

终于有办法了：

let selected = false;

$(function () {

    $('#where-input').blur(function () {
        if (!selected) {
            $(this).val('');
        }
    });

    $('#where-input').focus(function () {
        selected = false;
        autocomplete = new google.maps.places.Autocomplete((document.getElementById('where-input')), {types: ['(cities)']});

        autocomplete.addListener('place_changed', function () {
            selected = true;
        });
    });


    $("#where-input").keypress(function (event) {
        if (event.keyCode == 13 || event.keyCode == 9) {
            $(event.target).blur();
            if ($(".pac-container .pac-item:first span:eq(3)").text() == "")
                firstValue = $(".pac-container .pac-item:first .pac-item-query").text();
            else
                firstValue = $(".pac-container .pac-item:first .pac-item-query").text() + ", " + $(".pac-container .pac-item:first span:eq(3)").text();
            event.target.value = firstValue;

        } else
            return true;
    });

});