必须通过 list 属性将 input 与 datalist 关联，ID 值需完全一致且不带 #；input 类型须为 text/search/url/tel/email/date 等支持补全的类型；option 必须有 value 属性才参与前缀匹配，label 仅作显示不参与匹配。

如何用 datalist 绑定 input 实现原生补全

必须通过 list 属性把 input 和 datalist 关联起来，仅靠 ID 匹配不行——ID 必须和 list 的值完全一致，且不能带 # 前缀。

常见错误是写成 <input list="#mylist"> 或漏掉 list 属性，导致下拉候选项根本不出现。

• datalist 本身不可见，也不响应点击；它只是纯数据容器
• input 类型必须是 text、search、url、tel、email、date 等支持补全的类型（number 和 range 不支持）
• 浏览器只在用户输入时匹配 option 的 value（不看 label），且匹配逻辑是“前缀匹配”，不是模糊搜索

datalist 中的 option 值怎么填才有效

option 必须有 value 属性，内容才会作为候选文本显示；空 value 或缺失 value 的 option 会被忽略。

label 属性仅用于辅助显示（如在某些浏览器中作为描述文字出现在 value 右侧），但不影响匹配行为，也不能替代 value。

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

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari" label="(Apple)">
</datalist>

上面例子中，输入 “C” 会触发 “Chrome” 补全；输入 “(A” 则不会匹配任何项——因为 label 不参与匹配。

为什么输入后没下拉？检查这三点

补全失效通常不是语法错，而是被浏览器策略或 DOM 状态干扰：

• 页面未完成加载就操作 input（比如 JS 动态插入后立即 focus），部分浏览器（尤其是 Safari）可能跳过初始化补全逻辑
• input 被设了 autocomplete="off" ——这个属性会直接禁用 datalist，哪怕 list 存在也无效
• datalist 放在 input 后面且 JS 提前触发了输入事件（例如用 input.value = "xxx" + dispatchEvent），某些版本 Chrome 不会自动展开候选项

兼容性和真实体验差异

datalist 在 Chrome、Edge、Firefox 中表现较一致，但在 Safari 上有明显限制：不支持键盘方向键高亮选项、无法用 Enter 强制选中（只能鼠标点）、且对非 ASCII 字符（如中文）前缀匹配更严格。

它不提供事件钩子（比如没有 onselect），选中后只触发 input 和 change 事件；如果需要监听“从列表中选中”这个动作，得靠比对 input.value 和历史值，或监听 blur 后校验是否属于 datalist 中的某个 value。

真正难处理的是动态更新候选项——datalist 不支持 JS 直接刷新匹配逻辑，改完 option 后用户必须再输一次才能触发新匹配。