Google自动填充商店API不会通过TAB触发更改事件

Question

根据Google Autocomplete Places API文档,getPlace()调用应该返回包含所有位置数据的Places对象,或者,如果该位置不存在(即 - 用户忽略了建议),它应该返回一个存根填充Places对象的name元素.但是,它仅在用户按Enter时执行后一操作,而不是在TAB超出字段时执行.

我已经尝试过查看更改事件,keyup,keydown事件.我已经尝试使用键码13触发关于模糊等的keydown事件.似乎没有什么工作.

有没有人克服过这个问题？很明显,用户会在表单中进行制表,并且总是有可能忽略这些建议.

Answer 1

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" async defer></script>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>

Answer 2

以下扩展了 @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
    });
  } 
});