javascript - 如何检测是否在 Google Maps API 自动完成列表中选择了项目？

Question

我正在尝试实现以下行为。

当使用 Google Maps API 的自动完成功能时，用鼠标点击列表中的元素或按 Enter 键将选择所需的元素并在输入中填写必要的值。但是，如果您在焦点仍在输入元素本身时按下 Enter，则什么也不会发生，因此有必要以某种方式解决这个问题。

我决定通过从自动完成列表中选择第一项来解决这个问题:

$("#autocomplete").keypress(function(e){
  if(e.which == 13) {
    select-first-item();
  }
});

它运行良好，但问题是即使您使用键盘上的向下箭头，浏览自动完成列表，然后按回车键，它也会选择第一项。 G。选择第 4 个结果。

如何解决？我试过 :focus，但它似乎不太可靠。有时它会选择第一个结果，有时它会从列表中选择焦点项。

Google map 将 pac-item-selected 类添加到列表中选择的项目，所以我最后一次尝试是基于检查 length。

$("#autocomplete").keypress(function(e){
  if ( $( ".pac-item-selected" ).length ) {
    if(e.which == 13) {
      select-first-item();
    }
  }
}

但是，只要您按下任何按钮，类就会消失并且检查长度将不起作用。如果我使用 event.preventDefault，整个功能将不起作用，因为自动完成显然是基于 keypress/keydown/... 事件。

我无法让 map 在我的 fiddle 中正常工作，所以我改编了一个旧的 fiddle :http://jsfiddle.net/pbbhH/1222/

有什么解决办法吗？

Answer 1

使用自动完成的 place_changed 事件，您可以检查地点是否已更改:

var input_source = document.getElementById('input_source');
var autocomplete = new google.maps.places.Autocomplete(input_source);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
         // process
    });