datalist 是 HTML5 唯一原生下拉建议机制，仅支持严格前缀匹配，不支持模糊搜索、动态请求或语义联想；真实场景需用 input 事件+防抖+fetch 实现动态联想，并配合 contenteditable 标签输入方案。
用 list 属性绑定 datalist 是唯一原生方案
浏览器不提供“智能联想”这个功能，datalist 是 HTML5 唯一能触发下拉建议的原生机制，但它只做前缀匹配、不发请求、不监听选中。你写 <input list="tags"><datalist id="tags"><option value="react"></datalist>，用户输 “re” 才会看到 “react”，输 “act” 就没反应。
常见错误包括：list 值和 datalist 的 id 大小写不一致、带空格、用了中文或特殊字符；input 类型不是 text 或 search（date、checkbox 等类型直接忽略 list）；option 的 value 为空或只有空格，导致选项不显示。
- 确保
id和list完全一致，推荐全小写 + 连字符，如id="tag-suggestions"配list="tag-suggestions" -
option只认value，label属性在多数浏览器中被忽略，别指望它显示别名 - 移动端 Safari 对
datalist支持弱，部分机型完全不弹出，不能当作可靠交互路径
datalist 不支持模糊搜索，别硬凑
它只比对输入内容是否是 option.value 的开头，比如 value="typescript"，用户输 “type” 能匹配，“script” 或 “types” 都不行。试图用 JS 动态改 datalist.innerHTML 来“模拟模糊”，结果只是把一堆不相关选项塞进去，用户依然得靠前缀触发，体验更差。
真实场景中，用户搜 “ts” 想找 “typescript”，搜 “前端” 想找 “react”、“vue”，这种需求 datalist 从底层逻辑上就不支持。
立即学习“前端免费学习笔记（深入）”；
- 如果数据量小、关键词固定（如国家名、城市列表），
datalist足够轻量，不用 JS - 只要涉及拼音首字母、错别字容错、语义联想、热度排序，就必须换 JS 方案
- 不要给
input同时加list和自定义 JS 下拉——两者行为冲突，Chrome 可能叠加显示两套建议
动态联想必须用 input 事件 + 防抖 + fetch
所谓“动态”，本质是监听用户每次按键，等他停顿（比如 300ms），再把当前值发给后端，拿到建议数组后渲染到页面浮层。这个过程 datalist 完全不参与。
容易踩的坑：没加防抖，每敲一个字都发一次请求，网络卡顿、后端压力大、UI 频繁重绘；没清空上次请求的 pending 状态，导致后输的词返回得慢，覆盖了先输的正确结果；建议列表用 div 渲染但没设 position: absolute，影响布局流；没处理 Escape 或失焦时隐藏列表，残留 DOM。
- 用
setTimeout+clearTimeout实现防抖，别用 Lodash —— 简单场景没必要引入依赖 - 请求地址带
q参数，如/api/tags?q=py，后端据此做全文检索或向量匹配 - 响应数据结构统一用
{ id: "123", label: "Python" }，前端别拼字符串，防 XSS - 键盘导航必须支持
ArrowDown/ArrowUp移动焦点、Enter确认、Tab跳过，否则可访问性不达标
多标签输入别用 input type="text" 存字符串
用户输 “react, vue, ts” 然后靠 JS 拆逗号，这是最脆弱的设计。中文顿号、空格、换行、多余逗号都会让解析失败；用户删掉中间一个标签，整个字符串要重切；提交时后端收到的是乱序字符串，不是干净数组。
真正可控的做法是放弃 input，改用 div[contenteditable="true"] 作为输入容器，每个标签都是独立节点（比如 <span class="tag">react<button type="button">×</button></span>），JS 只管监听原始输入、匹配、插入、删除节点，状态和 DOM 保持同步。
- 按
Space、Enter、Comma触发标签提交，不是所有键都响应 - 输入中实时显示建议列表，点击或回车插入结构化节点，不是往 input.value 里塞文本
- 最终提交前，遍历所有
.tag元素取textContent或dataset.value，组装为数组 - 缓存最近一次请求结果（用
Map存query → response），避免重复请求相同关键词
最常被忽略的点是焦点管理：输入框、建议列表、列表项、鼠标悬停、键盘焦点之间的状态切换稍有遗漏，就会出现点不中、关不掉、回车没反应。这不是边缘 case，而是动态联想能否落地的核心门槛。
