Google 自动完成放置 API 不会通过 TAB 触发更改事件

Google Autocomplete Places API not triggering event on change via TAB

本文关键字：TAB 事件 API Google      更新时间：2023-09-26

根据 Google 自动完成地点 API 文档，getPlace()调用应返回包含所有位置数据的 Places 对象，或者，如果该地点不存在（即 - 用户忽略了建议），它应该返回一个存根，其中只填充了 Places 对象的 name 元素。但是，它仅在用户按 Enter 时执行此操作，而不是在用户按 TAB 键退出字段时执行。

我尝试查看更改事件，keyup，keydown事件。我尝试在模糊等情况下使用 keycode 13 触发keydown事件。似乎什么都不起作用。

有没有人克服这个问题？很明显，用户会按 Tab 键浏览表单，并且他们总是有可能忽略这些建议。

pac-input作为您的地点搜索输入，您可以执行以下操作：

// Trigger search on blur
document.getElementById('pac-input').onblur = function () {
    google.maps.event.trigger(this, 'focus', {});
    google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
    });
};

或者使用谷歌地图事件侦听器：

// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("pac-input"), 'blur', function() {
    google.maps.event.trigger(this, 'focus', {});
    google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
    });
});
<小时 />

编辑：如评论中所述，这扰乱了用户通过鼠标单击选择位置的"正常行为"。

下面是一个使用纯Javascript的完整示例。对于（更简单的）jQuery解决方案，请查看@ChrisSnyder的答案。

function initialize() {
  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      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("autocomplete"), '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;
}
#autocomplete {
  width: 300px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>

以下内容扩展了@MrUpsidown的解决方案，但尽量避免在用户单击下拉列表中的项目时弄乱用户，如 @Jkk.jonah 所述

// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("pac-input"), 'blur', function() {
  if (jQuery('.pac-item:hover').length === 0 ) {
    google.maps.event.trigger(this, 'focus', {});
    google.maps.event.trigger(this, 'keydown', {
        keyCode: 13
    });
  } 
});

显然发生了一些变化，上面的代码在最后几天不起作用，控制台中出现了以下异常 

 undefined is not an object (evaluating 'a.handled=!0')

您需要在焦点事件的触发器上添加一个空对象 

var inputSearch = document.getElementById('pac-input');
google.maps.event.trigger(inputSearch, 'focus', {})
google.maps.event.trigger(inputSearch, 'keydown', {
    keyCode: 13
});
相关文章：