第 106 期(W3C标准-HTML)：原生HTML实现输入框下拉补全提示

[wingmeng]

输入框自动填充（或称输入框自动补全提示），是一种常见的提升用户体验的输入组件，其特点是用户在自由输入的同时会有一些建议选项可供快速补全输入，常见于搜索场景。

传统方法实现这个功能，需要编写大量的 JS 代码。如果我们利用 HTML5 中的 <datalist> 则可以使用纯 HTML 实现这个功能。

<input type="text" list="language">
<datalist id="language">
  <option value="Java">
  <option value="C">
  <option value="Python">
  <option value="C++">
  <option value="C#">
  <option value=".NET">
  <option value="JavaScript">
  <option value="PHP">
  <option value="Objective-C">
  <option value="SQL">
  <option value="Ruby">
  <option value="MATLAB">
  <option value="Groovy">
  <option value="Delphi/Object Pascal">
  <option value="Assembly language">
  <option value="Visual Basic">
  <option value="Go">
  <option value="Swift">
  <option value="Perl">
  <option value="R">
</datalist>

效果：

还可以为下拉补全列表的每一项设置“副标题”，例如：

<option value="Java" label="占有率：16.028%">

效果：