input 的 list 属性值必须严格等于 datalist 的 id 值，且两者同页；仅 text 类型输入支持，option 的 value 为必需属性，label 可实现显示与提交值分离。

使用 list 属性可将 <input> 与 <datalist> 关联，实现带提示的下拉式输入建议。关键在于：input 的 list 属性值必须严格等于 datalist 的 id 值，且两者需在同一个页面中（无需父子嵌套）。

基础写法：id 和 list 必须完全匹配

这是最核心的规则。浏览器通过字符串精确匹配来建立关联：

• <input list="cityList"> → 对应 <datalist id="cityList">
• ID 区分大小写：list="CityList" 不会匹配 id="citylist"
• ID 中不能含空格或特殊字符（仅支持字母、数字、下划线、短横线）

完整结构示例（可直接运行）

以下是一个可用的最小完整代码：

<input type="text" list="browsers" placeholder="选择浏览器">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

注意：<option> 不需要 <select> 包裹；value 是唯一必需属性，文本内容可省略（如 <option value="Chrome"> 已足够）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

常见问题与注意事项

• type 必须兼容：仅 text、search、url、tel、email、date 等文本类输入支持 list；number 或 range 不生效
• 不替代表单验证：用户仍可输入 <datalist> 以外的内容，需额外用 JS 或 pattern 限制
• 无 JavaScript 也能工作：纯 HTML 即可触发原生下拉提示，无需监听事件
• 样式不可直接控制：下拉面板是浏览器原生控件，CSS 无法修改其外观（但可影响 input 本身）

进阶用法：动态选项与 value/text 分离

可利用 option 的 label 属性显示友好文本，而提交时仍用 value：

<input type="text" list="countries">
<datalist id="countries">
  <option value="CN" label="中国">
  <option value="US" label="美国">
  <option value="JP" label="日本">
</datalist>

用户看到“中国”，输入后实际提交的是 "CN" —— 这对表单处理更清晰。