Как адаптировать Event DOM Listener к Google Maps JavaScript API v3.35

Question

Я использовал следующий код, чтобы перехватить событие ввода ключа пользователя и автоматически выбрать первый результат из результатов автозаполнения (pac-элементы), если пользователи не выбрали ни одного из них (т. Е. Нет pac-элемента, помеченного как pac-элементы). -item выбранных).

var input = document.getElementById('pac-input')
var autocomplete = new google.maps.places.Autocomplete(input)

google.maps.event.addDomListener(input, 'keypress', function(e) {
    if (e.keyCode===13 && !e.triggered) {
        var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
        if (!isLatLngInInputBox && !suggestion_selected) {
            google.maps.event.trigger(this,'keydown',{keyCode:40})
            google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true})
        }
    }
})

Однако, начиная с Google Maps JavaScript API v3.35, я получаю сообщение об ошибке вроде Uncaught TypeError: a.stopPropagation is not a function поднят в линию google.maps.event.trigger(this,'keydown',{keyCode:40}),

В результате я проверил документацию и заметил, что метод триггера google.maps.event изменился. Третий аргумент теперь указывается как eventArgs вместо var_args.

Я попытался выяснить, как адаптироваться к нему и изменил код следующим образом:

google.maps.event.addDomListener(input, 'keypress', function(e) {
    console.log(e.key)
    if (e.key==="Enter" && !e.triggered) {
        var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
        if (!isLatLngInInputBox && !suggestion_selected) {
            google.maps.event.trigger(this,'keydown',{key:"ArrowDown"})
            google.maps.event.trigger(this,'keydown',{key:"Enter",triggered:true})
        }
    }
})

Несмотря на то, что клавиша Enter может быть захвачена идеально, клавиша ArrowDown не работает должным образом.

На самом деле, я могу захватить ключ ArrowDown с console.log(e.key), но на самом деле ничего не происходит. Также, console.log(e.key) ничего не ловит, когда я нажимаю клавишу ArrowDown на клавиатуре, что меня так смущает.

Кто-нибудь сталкивался с подобной проблемой? Спасибо за любое предложение!

Answer 1

Использование new Event() создать соответствующий объект события в качестве третьего параметра, а также keydown вместо keypress в вашем addDomListener

var input = document.getElementById('pac-input')
var autocomplete = new google.maps.places.Autocomplete(input)
google.maps.event.addDomListener(input, 'keydown', function(e) {
  var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
  if (suggestion_selected) {
    console.log(document.querySelectorAll('.pac-item-selected'));
  } else {
    if (e.key === "Enter" && !e.triggered) {
      var ex1 = new Event('keydown');
      ex1.code = "ArrowDown";
      ex1.key = "ArrowDown";
      ex1.keyCode = 40;
      google.maps.event.trigger(this, 'keydown', ex1);

      var ex2 = new Event('keydown');
      ex2.code = "Enter";
      ex2.key = "Enter";
      ex2.keyCode = 13;
      ex2.triggered = true;
      google.maps.event.trigger(this, 'keydown', ex2);
    }
  }
});

Редактировать:

У меня есть рабочая скрипка здесь https://jsfiddle.net/ergec/e6wsdb85/