34

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

4

4 回答 4

69

你应该试试这个datalist元素。它在W3C HTML5 Recommendation中明确定义，可能是目前和不久的将来桌面上的最佳选择。

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

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

Google chrome 和基于chromium的浏览器从 v21.x 开始支持它（截至 2014 年 12 月，当前版本为 39，在此处查看其他浏览器的兼容性状态）Firefox和Opera也长期支持。Modern(!) IE 版本部分支持datalist。

演示： 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

于 2013-11-04T23:06:44.753 回答
17

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的其他事实，在这种情况下不要讨厌，因为它确实涵盖了基础知识：

  • 启用自动完成后，浏览器会根据用户之前输入的值自动完成值。
  • 可以为表单设置“开启”自动完成功能，为特定输入字段设置“关闭”功能，反之亦然。
  • 自动完成属性适用于以下类型：文本、搜索、网址、电话、电子邮件、密码、日期选择器、范围和颜色。
于 2013-03-09T20:46:23.770 回答
13

这个问题已经很老了，但我有2017 年的更新答案！

这是官方当前 WHATWG HTML 标准的链接，用于启用自动完成功能。

以下答案来自我在这里的原始答案：https ://stackoverflow.com/a/41965106/1696153

要触发自动完成，您现在要做的就是input正确命名您的标签。

Google为开发对移动设备友好的 Web 应用程序编写了一个非常好的指南。他们有一节介绍如何命名表单上的输入以轻松使用自动填充。尽管它是为移动设备编写的，但这适用于桌面和移动设备！

如何在 HTML 表单上启用自动完成

以下是有关如何启用自动完成功能的一些要点：

  • 将 a<label>用于所有<input>字段
  • autocomplete为您的标签添加一个属性<input>并使用本指南进行填写。
  • 为所有标签正确命名您的name和autocomplete属性<input>

  • 示例：

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

如何命名您的<input>标签

为了触发自动完成，请确保正确命名标签中的name和autocomplete属性。<input>这将自动允许在表单上自动完成。确保也有一个<label>！也可以在此处找到此信息。

以下是如何命名您的输入：

  • 姓名
    • 将这些中的任何一个用于name：name fname mname lname
    • 将这些中的任何一个用于autocomplete：
      • name（全名）
      • given-name（对于名字）
      • additional-name（中间名）
      • family-name（对于姓氏）
    • 例子：<input type="text" name="fname" autocomplete="given-name">
  • 电子邮件
    • 将这些中的任何一个用于name：email
    • 将这些中的任何一个用于autocomplete：email
    • 例子：<input type="text" name="email" autocomplete="email">
  • 地址
    • 将这些中的任何一个用于name：address city region province state zip zip2 postal country
    • 将这些中的任何一个用于autocomplete：
      • 对于一个地址输入：
        • street-address
      • 对于两个地址输入：
        • address-line1
        • address-line2
      • address-level1（州或省）
      • address-level2（城市）
      • postal-code（邮政编码）
      • country
  • 电话
    • 将这些中的任何一个用于name：phone mobile country-code area-code exchange suffix ext
    • 将这些中的任何一个用于autocomplete：tel
  • 信用卡
    • 将这些中的任何一个用于name：ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • 将这些中的任何一个用于autocomplete：
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • 用户名
    • 将这些中的任何一个用于name：username
    • 将这些中的任何一个用于autocomplete：username
  • 密码
    • 将这些中的任何一个用于name：password
    • 将这些中的任何一个用于autocomplete：
      • current-password（用于登录表格）
      • new-password（用于注册和密码更改表格）

资源

于 2017-01-31T18:42:13.460 回答
3

使用 HTML5，无需任何 Javascript 即可实现 google 建议样式的自动完成输入！

请参阅这篇文章： HTML5 风格的“Google Suggest”

但是，它还没有得到足够的支持。文章中的示例目前仅适用于 Opera。

目前，最好只使用一个经过良好测试且具有广泛浏览器支持的库，例如具有自动完成小部件的 JQuery UI。

于 2013-07-03T17:51:48.047 回答