datalist是原生可编辑下拉提示的默认解法，无需JS即可实现输入过滤、点击选择和自由输入；关键要求是input的list属性值与datalist的id严格一致，且推荐使用type="text"或"type=search"以避免格式校验干扰匹配。
用 datalist 实现原生可编辑下拉提示最省事
现代浏览器（Chrome/Firefox/Edge/Safari）已全面支持 datalist，它不需要 JS 就能提供输入时自动过滤、点击选择、自由输入三项能力，是「可编辑下拉」的默认解法。
关键就两点：input 的 list 属性值必须和 datalist 的 id 完全一致；datalist 可以放在页面任意位置，只要 ID 能被找到。
常见错误现象：
-
input写了list="cities"，但datalist的id是"cityList"或带空格——匹配失败，提示不出现 - 用了
type="email"或type="number"—— 浏览器会强制校验格式，干扰匹配逻辑，建议统一用type="text"或type="search" - 把
option写成<option>北京</option>（没设value）——选中后填入的是“北京”，无法区分显示文本与提交值
示例代码：
立即学习“前端免费学习笔记（深入）”；
<input type="text" list="cities" name="city" placeholder="请输入或选择城市"> <datalist id="cities"> <option value="1001">北京</option> <option value="2002">上海</option> <option value="3003">广州</option> </datalist>
当需要显示友好文本、提交真实 value 时怎么同步
datalist 默认只往 input 填 value，但用户看到“1001”显然不如“北京”。这时不能靠改 option 的结构解决，得用双字段 + 少量 JS 同步。
实操建议：
- 保留一个可见的
<input type="text">，用于交互和展示“北京”这类文本 - 加一个隐藏域
<input type="hidden" name="city_id">，专门存“1001”这类结构化值 - 监听
input的input事件（不是change），遍历datalist中所有option，比对option.textContent是否等于当前输入值 - 匹配成功则设置隐藏域的
value为该option.value；未匹配则清空隐藏域
注意：不要监听 change，因为用户手动输入后失焦可能没触发匹配；input 事件能覆盖实时输入、粘贴、删除等所有场景。
IE 或需要严格样式控制时，input + select 组合怎么模拟
如果项目仍需兼容 IE，或要求下拉箭头紧贴输入框右侧、选项高度完全对齐、支持动态加载等，就得放弃 datalist，用 CSS 定位把 input 和 select 视觉叠在一起。
核心要点：
-
input设position: relative，select设position: absolute并 top/left 对齐，再用z-index控制层级 -
select需加opacity: 0或visibility: hidden，仅保留其点击热区，不遮挡input文本 - 用 JS 监听
input的focus显示select，blur后延时收起（防点击选项时先触发 blur） - 选中
select项后，把对应option.value和textContent分别写入隐藏域和input.value
这个方案最大的坑是移动端 Safari 会拦截 select 的点击并弹出全屏选择器，必须加 ontouchstart="event.preventDefault()" 并自行接管触摸逻辑。
无障碍与键盘导航必须手动实现
哪怕用了 datalist，它也不支持键盘方向键切换选项、Enter 确认、Escape 收起——这些行为浏览器不会自动补全。若产品有无障碍合规要求（如 WCAG），就得自己实现。
关键动作：
- 给
input加role="combobox"、aria-expanded和aria-controls，指向自定义下拉容器 - 下拉容器用
<div role="listbox">包裹，每个选项用<div role="option">，禁用<ul>/<li> - 监听
keydown，对ArrowDown/ArrowUp手动管理焦点索引，调用focus()；Enter填值并收起；Escape直接收起 - 每次展开/收起都要同步更新
aria-expanded值，否则屏幕阅读器无法感知状态变化
最容易被忽略的是焦点管理：鼠标点击某条建议后，焦点可能脱离下拉结构，导致后续方向键失效。必须确保所有交互路径（键盘、鼠标、触摸）都让焦点稳定落在某个 role="option" 上。
