google maps api автозаполнение при размытии / фокусировке?

Question

Таким образом, я использую API Google Maps для заполнения некоторой информации на сервере, но если пользователь не «нажимает» на опцию выпадающего меню, сервер никогда не заполняется данными.

Я нашел обходной путь переполнения стека: ссылка , но при размытии / фокусировке ничего не срабатывает.

let address = document.getElementById('inputAddress');
(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" || type == 'blur') {
            var orig_listener = listener;
            listener = function(event) {
                var suggestion_selected = $(".pac-item-selected").length > 0;
                // if [enter] or [tab] is pressed
                if ((event.which == 13 || event.which == 9) && !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);

})(address);

Я понимаю, что делает код. Когда вы нажимаете вкладку или вводите, он имитирует нажатие стрелки вниз. Я попытался добавить в слушателя для размытия, но ничего не работает. Событие по-прежнему запускается, но оно не выбирается и не обновляется.

Хотелось бы помочь с этой ситуацией. Спасибо!

Answer 1

inputAddress Ваш ввод автозаполнения, вы можете сделать следующее:

// Trigger search on blur
document.getElementById('inputAddress').onblur = function () {

    google.maps.event.trigger(this, 'focus', {});
    google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
    });
};

Или с помощью прослушивателя событий карт Google:

// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("inputAddress"), 'blur', function() {

    google.maps.event.trigger(this, 'focus', {});
    google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
    });
});

Это само по себе будет мешать пользователю выбрать предложение с помощью мыши. Поэтому, чтобы предотвратить это, вам нужно сделать еще несколько проверок. Ниже приведен полный пример. Прочитайте комментарии к коду для получения дополнительной информации.

Если вы используете jQuery в своем проекте, посмотрите на этот ответ , который делает то же самое.

function initialize() {

  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('inputAddress')), {
      types: ['geocode']
    });

  ac.addListener('place_changed', function() {

    var place = ac.getPlace();

    if (!place.geometry) {

      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      console.log("No details available for input: '" + place.name + "'");
      return;
    }

    console.log("You selected: '" + place.formatted_address + "'");
  });

  // Trigger search on blur
  google.maps.event.addDomListener(document.getElementById("inputAddress"), 'blur', function() {

    // Find the pac-container element
    var pacContainer = nextByClass(this, 'pac-container');

    // Check if we are hovering on one of the pac-items
    // :hover propagates to parent element so we only need to check it on the pac-container
    // We trigger the focus and keydown only if :hover is false otherwise it will interfere with a place selection via mouse click
    if (pacContainer.matches(':hover') === false) {

      google.maps.event.trigger(this, 'focus', {});
      google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
      });
    }

  });
}

function hasClass(elem, cls) {
  var str = " " + elem.className + " ";
  var testCls = " " + cls + " ";
  return (str.indexOf(testCls) != -1);
}

function nextByClass(node, cls) {
  while (node = node.nextSibling) {
    if (hasClass(node, cls)) {
      return node;
    }
  }
  return null;
}

#inputAddress {
  width: 300px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize" async defer></script>
<input id="inputAddress" placeholder="Enter your address" type="text"></input>