如何使用 HTML5 的 datalist 标签为 input 元素创建自动完成建议列表？

推荐答案

// www.javascriptcn.com code example
<label for="browsers">选择一个浏览器:</label>
<input list="browsers" id="browsers" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Opera">
  <option value="Edge">
  <option value="Internet Explorer">
</datalist>

本题详细解读

HTML5 的 <datalist> 标签与 <input> 标签配合使用，可以为输入框创建自动完成建议列表，用户在输入时，会根据已输入的内容动态匹配 <datalist> 中定义的 <option> 元素，并显示在下拉列表中。

工作原理:

1. <input> 标签的 list 属性： <input> 标签使用 list 属性来指定与之关联的 <datalist> 标签的 id。
2. <datalist> 标签： <datalist> 标签包含了一系列的 <option> 元素，每个 <option> 元素的 value 属性定义了一个建议的值。
3. 用户输入： 当用户在 <input> 框中输入内容时，浏览器会自动查找与用户输入内容匹配的 <datalist> 中的 <option> 的 value 值。
4. 显示建议： 匹配的值会以下拉列表的形式显示给用户，用户可以选择一个建议值，也可以继续输入自己的内容。

示例解析：

• <label for="browsers">选择一个浏览器:</label>： 这是一个标签，用于关联 id 为 browsers 的 input 元素，增加了可访问性。
• <input list="browsers" id="browsers" name="browser">: 这是一个 input 元素，list="browsers" 将其与 id 为 browsers 的 <datalist> 标签关联起来， id="browsers" 保证了 label 的关联，name="browser" 是提交表单时使用的名字。
• <datalist id="browsers">: 定义了一个 <datalist> 元素，其 id 为 browsers，用于和 input 元素 list 属性指定的id进行匹配。
• <option value="Chrome"> ... </option>: 在 <datalist> 中，每一个 <option> 元素定义了一个建议值。例如，value="Chrome" 表示一个建议值为 "Chrome"。

重要特性：

• 非强制选择： 用户可以选择 datalist 中提供的建议，也可以输入不属于建议列表的值。
• 动态匹配： 建议列表会随着用户输入的变化而动态更新。
• 语义化： <datalist> 标签提供了一种语义化的方式来实现自动完成功能。
• 浏览器兼容性： 现代浏览器都支持 <datalist> 标签。

注意事项：

• <datalist> 必须放在当前页面中。不能通过 include 或者外部文件引入。
• <datalist> 中的 <option> 标签并不支持除了 value 属性以外的其他属性。
• <datalist> 标签不能作为表单元素的一部分提交。它只是用来辅助输入，提交的值是输入框中的值。

这个例子展示了如何使用 <datalist> 创建一个浏览器选择的自动完成列表。 用户在输入框中输入字母时， 匹配的浏览器选项将会被显示出来。