自动完成文本输入

Question

我知道有很多 JavaScript 解决方案，但是有没有一种 HTML5 方法可以让文本输入自动完成？ datalist 元素几乎就是我所追求的，除了它允许您输入自定义值而不是将您限制在列表中。

原文由 Evanss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML5 有一个 autocomplete 属性，可以在字段中指定为 on 或 off 。

这是一个例子：

 <form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

它的工作方式是，您第一次提交的值将在您随后访问此页面时在每个字段的 keyup 上向您建议。

• 决定使用此功能的 关键 问题之一是浏览器兼容性。最好的办法是检查多个浏览器以确保其正常工作。 caniuse.com 使支持看起来很糟糕，但我认为使用它来帮助那些拥有现代浏览器的人没有任何危害。

关于 autocomplete 来自 W3Schools 的其他事实，在这种情况下不要讨厌，因为它确实涵盖了基础知识：

• 启用自动完成后，浏览器会根据用户之前输入的值自动完成值。
• 可以将表单的自动完成设置为“开”，将特定输入字段的自动完成设置为“关闭”，反之亦然。
• autocomplete 属性适用于以下类型：text、search、url、tel、email、password、datepickers、range 和 color。

原文由 tim peterson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您应该尝试 datalist 元素。它在 W3C HTML5 Recommendation 中有明确的定义，可能是现在和不久的将来最好的选择。

datalist 元素使用 input 元素上的 list 属性连接到 input 元素。

作为 datalist 元素后代的每个 option 元素，未被禁用，并且其值是一个非空字符串的字符串，表示一个建议。每个建议都有一个 值 和一个 标签。

Google chrome 和基于 chromium 的浏览器从 v21.x 开始支持它（截至 2014 年 12 月，当前版本为 39，请 在此处查看其他浏览器 的兼容性状态） Firefox 和 Opera 也支持很长时间。现代（！）IE 版本 部分支持 数据列表。

演示： Eiji Kitamura 的出色 工作数据列表实现。

Polyfill ：另请查看 RelevantDropdown 。它是一个依赖于 jQuery 和 Modernizr 的 HTML5 数据列表 polyfill。

尝试运行这个例子：

 <input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

W3 参考： https ://www.w3.org/TR/html5/forms.html#the-datalist-element

原文由 edigu 发布，翻译遵循 CC BY-SA 3.0 许可协议