Google自动填充 - 输入以选择

Question

我为Google表单的文本字段设置了Google自动填充功能,并且它运行良好.

但是,当显示建议列表,并且您使用箭头滚动并使用回车选择时,它会提交表单,但仍有待填写的框.如果您单击以选择建议它可以正常工作,但按下输入提交.

我该怎么控制呢？如何阻止输入提交表单,而是从自动填充中选择建议？

谢谢!{S}

Answer 1

你可以preventDefault用来停止输入命中时提交的表单,我使用了这样的东西:

  var input = document.getElementById('inputId');
  google.maps.event.addDomListener(input, 'keydown', function(event) { 
    if (event.keyCode === 13) { 
        event.preventDefault(); 
    }
  }); 

Answer 2

使用Google事件处理似乎是正确的解决方案,但它不适合我.这个jQuery解决方案对我有用:

$('#inputId').keydown(function (e) {
  if (e.which == 13 && $('.pac-container:visible').length) return false;
});

.pac-container是保存自动完成匹配的div.我们的想法是,当匹配可见时,Enter键将只选择活动匹配.但是当比赛被隐藏时(即选择了一个地方),它将提交表格.

Answer 3

我已经合并了@sren和@mmalone的前两个答案来产生这个:

var input= document.getElementById('inputId');
google.maps.event.addDomListener(input, 'keydown', function(e) { 
    if (e.keyCode == 13 && $('.pac-container:visible').length) { 
        e.preventDefault(); 
    }
}); 

在页面上完美运行.当建议容器(.pac-container)可见时,防止提交表单.现在,当用户按下回车键时,会选择自动完成下拉列表中的一个选项,并且必须再次按下该选项才能提交表单.

我使用此解决方法的主要原因是因为我发现如果在选择选项后立即发送表单,则通过回车键,纬度和经度值不会足够快地传递到其隐藏的表单元素中.

所有归功于原始答案.

Answer 4

这个为我工作：

google.maps.event.addDomListener(input, 'keydown', e => {

  // If it's Enter
  if (e.keyCode === 13) {

    // Select all Google's dropdown DOM nodes (can be multiple)
    const googleDOMNodes = document.getElementsByClassName('pac-container');

    // Check if any of them are visible (using ES6 here for conciseness)
    const googleDOMNodeIsVisible = (
      Array.from(googleDOMNodes).some(node => node.offsetParent !== null)
    );

    // If one is visible - preventDefault
    if (googleDOMNodeIsVisible) e.preventDefault();

  }

});

可以轻松地从ES6转换为任何浏览器兼容的代码。