在选择浏览器自动完成时提交表单（不是自定义自动完成）答案

【问题标题】：Submit form upon selection of browser autocompletion (not custom autocompletion)在选择浏览器自动完成时提交表单（不是自定义自动完成）
【发布时间】：2016-07-14 12:51:44
【问题描述】：

我的 HTML 正文如下所示：

<body>
<form action='http://www.example.com' method='GET'>
    <input type='text' id="text_input"/>
</form>
</body>

在字段中输入几个值并返回网站后，用户会收到来自浏览器的自动完成建议。当您选择一个时，如何让表单自动提交？

在this question 中，它们在 jQuery 中显示了类似的内容：

$("#text_input").autocomplete({
    source: ['apple', 'banana'],
    minLength: 2,
    select: function(event, ui) { 
        $("#text_input").val(ui.item.value);
        $("#text_input").closest('form').submit(); }
});

但是，这使用自定义自动完成建议，而不是浏览器保存的结果。

【问题讨论】：

标签： javascript jquery html forms autocomplete

【解决方案1】：

浏览器自动完成通常无法使用 JS 检测到，从脚本的角度来看，它只会显示用户输入了一些数据。

我认为最好的办法是重新考虑你解决问题的方法，但是如果你想这样做：

我能想到的最接近您所追求的事情是监听按键和更改，并且在没有按键的情况下发生的更改可以被视为自动完成。

例如

$(document).ready(function(){
  var keyPressed = false;
  $("#test").on("keydown", function(){
    keyPressed = true;
  });
  $("#test").on("change", function(){
    if(!keyPressed){
      alert("Submit");
    }
  });
});

示例：https://jsfiddle.net/o60nf4s6/

问题：

也可以通过使用右键单击上下文菜单粘贴来触发
change 事件仅在输入字段失去焦点后触发
输入中的任何按键都会阻止它提交，即使我们使用了自动完成功能。这仅在从浏览器选项中填充整个输入时才有效。

【讨论】：