HTML datalist 自动补全
HTML datalist元素：输入框自动补全建议、option子元素、与input list属性关联、自定义匹配过滤、select vs datalist选型 · 难度：入门 · +10XP
HTML datalist —— 输入框的智能提示
在搜索引擎中输入关键词时，经常会弹出下拉建议。这个功能叫自动补全（Autocomplete）。HTML5 提供了 <datalist> 元素，不需要一行 JavaScript 就能实现！
基本用法
<label for="city">选择城市：</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
<option value="杭州">
<option value="成都">
</datalist>
关键点：<input> 的 list 属性值 必须等于 <datalist> 的 id。这样就建立了关联。
datalist vs select —— 什么时候用哪个？
| 特性 | datalist | select |
|---|---|---|
| 用户可以自由输入 | 可以 | 只能选预定义选项 |
| 搜索/过滤建议 | 自动按输入过滤 | 显示全部 |
| 适合选项很多 | 用户边输边搜 | 下拉太长难找 |
| 适合固定选项 | 可以但不推荐 | 更精确 |
动手练习
- 基础练习：做一个最喜欢的编程语言输入框，用 datalist 提供 Python、JavaScript、Java、C++、Go 等建议。
- 进阶应用：做一个国家选择输入框，datalist 至少包含 20 个国家。用户输入首字母时能匹配到对应国家。
- 项目实战：复制一个简化版的搜索框——输入框 + datalist + 搜索按钮。用户在输入框里打字时，下方显示匹配的搜索建议。
接下来学什么？
下一课学习 meter 和 progress 度量元素——显示进度条和度量值。