input 的 list 属性值必须严格等于 datalist 的 id 值，且两者同页；仅 text 类型输入支持，option 的 value 为必需属性，label 可实现显示与提交值分离。
使用 list 属性可将 <input> 与 <datalist></datalist> 关联，实现带提示的下拉式输入建议。关键在于：input 的 list 属性值必须严格等于 datalist 的 id 值，且两者需在同一个页面中（无需父子嵌套）。
基础写法：id 和 list 必须完全匹配
这是最核心的规则。浏览器通过字符串精确匹配来建立关联：
-
<input list="cityList">→ 对应<datalist id="cityList"></datalist> - ID 区分大小写：
list="CityList"不会匹配id="citylist" - ID 中不能含空格或特殊字符（仅支持字母、数字、下划线、短横线）
完整结构示例（可直接运行）
以下是一个可用的最小完整代码：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
注意：<option></option> 不需要 <select></select> 包裹；value 是唯一必需属性，文本内容可省略（如 <option value="Chrome"></option> 已足够）。
常见问题与注意事项
-
type 必须兼容：仅
text、search、url、tel、email、date等文本类输入支持list；number或range不生效 -
不替代表单验证：用户仍可输入
<datalist></datalist>以外的内容，需额外用 JS 或pattern限制 - 无 JavaScript 也能工作：纯 HTML 即可触发原生下拉提示，无需监听事件
- 样式不可直接控制：下拉面板是浏览器原生控件，CSS 无法修改其外观（但可影响 input 本身）
进阶用法：动态选项与 value/text 分离
可利用 option 的 label 属性显示友好文本，而提交时仍用 value：
用户看到“中国”，输入后实际提交的是 "CN" —— 这对表单处理更清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
