Разрешить только выбранное значение из автозаполнения API карт Google (город) - PullRequest
Новая
       23

Разрешить только выбранное значение из автозаполнения API карт Google (город)

0 голосов
/ 06 января 2019

У меня есть этот код для автозаполнения городов в моем вводе. 

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

Я хочу разрешить автозаполнение только значений из карт Google, в противном случае отправьте четкие данные. Вы можете мне помочь? Спасибо

EDIT : Я нашел это решение, но оно не работает для отправки, только для входа, вы можете мне помочь? 

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

1 Ответ

0 голосов
/ 09 января 2019

Наконец, есть решение: 

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

});
...