Question

我正在努力实现以下行为。

使用Google Maps API的自动填充功能时，在列表中的元素上单击鼠标或按Enter键将选择所需的元素并使用必要的值填充输入。但是，如果在焦点仍然在输入元素本身时按Enter键，则没有任何反应，因此有必要以某种方式解决这个问题。

我决定通过从自动填充列表中选择第一项来解决该问题：

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

效果很好，但问题是，即使您使用键盘上的向下箭头，它也会选择第一项，浏览自动完成列表，然后在e时按Enter键。 G。选择了第4个结果。

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

Google地图会将类pac-item-selected添加到列表中所选的项目中，因此我的上次尝试基于检查length。

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

但是，只要你按下任何东西，课程就会消失，检查长度是行不通的。如果我使用event.preventDefault，整个功能都不起作用，因为自动完成显然是基于keypress / keydown / ...事件。

我无法正确地制作地图，所以我改编了一个老小提琴：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
    });

Answer 2

除了@ dhara-paramar解决方案：

只是想根据Google Maps Api Documantation添加新的更短版本：

var input_source = document.getElementById('input_source');
var autocomplete = new google.maps.places.Autocomplete(input_source);

autocomplete.addListener('place_changed', fillInAddress);

function fillInAddress() {
    //your process here
};

如何检测Google Maps API自动填充列表中是否选择了项目？

2 个答案: