表单自动完成功能可以有效降低用户输入成本，提升表单填写效率，很多开发者会想到用JavaScript实现，其实HTML原生就提供了datalist元素，搭配input就能快速实现该功能，不需要额外编写复杂的脚本逻辑。
datalist元素的基本作用
datalist是HTML5新增的元素，用来为input元素提供一组预定义的可选值，当用户输入内容时，浏览器会自动展示匹配的下拉选项，实现自动完成的效果。它需要和input元素配合使用，通过input的list属性关联到datalist的id。
基础实现步骤
实现datalist自动完成只需要三步：
- 创建input元素，设置list属性值为自定义的标识
- 创建datalist元素，设置id为和input的list属性相同的值
- 在datalist内部添加多个option元素，每个option的value就是要提供的可选值
代码示例
下面是一个简单的城市输入自动完成示例，用户输入时会自动匹配预设的城市选项：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>datalist自动完成示例</title>
</head>
<body>
<form>
<label for="city">选择或输入你所在的城市：</label>
<input type="text" id="city" list="city-list" placeholder="请输入城市名">
<datalist id="city-list">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
<option value="杭州">
<option value="成都">
<option value="武汉">
</datalist>
<input type="submit" value="提交">
</form>
</body>
</html>进阶用法说明
option设置显示文本
option元素除了设置value，还可以添加文本内容，当value和显示内容不同时，下拉列表会展示文本内容，选中后input会填入value值：
<datalist id="browser-list">
<option value="chrome">谷歌浏览器</option>
<option value="firefox">火狐浏览器</option>
<option value="safari">苹果浏览器</option>
</datalist>支持不同的input类型
datalist不仅支持text类型的input，还可以搭配email、url、number等类型的input使用，比如邮箱输入时提供常用邮箱后缀自动完成：
<input type="email" list="email-suffix" placeholder="请输入邮箱">
<datalist id="email-suffix">
<option value="@qq.com">
<option value="@163.com">
<option value="@gmail.com">
</datalist>注意事项
- datalist的id必须和input的list属性值完全一致，否则关联会失效
- 不同浏览器对datalist的样式支持略有差异，原生样式无法自定义，如果需要自定义样式需要额外用JavaScript实现
- datalist是HTML5新增元素，部分极旧版本的浏览器可能不支持，如果需要兼容旧浏览器，建议搭配降级方案
- 如果option没有设置value，仅设置文本内容，部分浏览器可能不会正常展示选项，建议同时设置value和文本内容
实际应用场景
datalist自动完成适合用在选项固定、不需要动态加载的场景，比如城市选择、商品分类选择、常用联系方式选择等。如果是需要动态从后端接口获取选项的自动完成，还是需要结合JavaScript实现，但简单静态场景用datalist是最省力的方式。