<input> 支持下拉提示又不限制输入的关键是使用 datalist 提供前缀匹配建议，用户仍可自由输入；需通过 list 属性关联 <datalist>，监听 input 事件获取值，动态更新时应清空并逐个添加 <option> 元素。
如何让 <input> 支持下拉提示但又不限制输入内容
关键在于 datalist 不是下拉选择器，而是“提示列表”——它只提供可选值建议，用户仍可自由输入任意内容。这点常被误当成 select 的替代品，结果发现无法限制输入、也无法监听选项点击事件。
正确用法是：给 <input> 设置 list 属性，指向一个 <datalist> 元素的 id：
<input type="text" list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
注意：<datalist> 里的 <option> 只需要 value，不要用 label 或嵌套文本；浏览器只会匹配 value 字符串前缀，不支持模糊或正则匹配。
datalist 在不同浏览器中的兼容性表现
Chrome / Edge / Firefox 均支持，但行为有差异：
立即学习“前端免费学习笔记（深入）”；
- Chrome 和 Edge：输入时自动弹出匹配项，支持键盘上下键选择，回车确认；
- Firefox：仅在点击输入框右侧小箭头时才展开列表（除非已开始输入且有匹配）；
- Safari（macOS/iOS）：支持基础匹配，但不显示下拉箭头，也不响应键盘导航（iOS 上尤其不可靠）；
- 所有浏览器都不触发
change或input以外的专用事件，选中某项不会自动填充——它只是把值“粘贴”进输入框，仍需监听input或blur来获取最终值。
为什么 onchange 拿不到 datalist 选中的值？
因为 datalist 本身不产生独立事件。用户点选提示项，本质是浏览器自动设置 input.value，然后触发 input 事件（不是 change）。所以：
- 监听
input事件才能实时捕获每次输入变化（包括手动打字和点击提示项）； -
change只在失焦且值改变后触发，无法区分是手输还是点选； - 没有
select那样的selectedIndex或selectedOptions，没法反查用户点了哪一项； - 若需“强制从列表中选”，得自己加校验逻辑，比如在
blur时检查value是否在datalist的options集合里。
如何动态更新 datalist 的选项？
不能直接操作 <datalist> 的 innerHTML 然后指望提示立刻生效——部分浏览器（尤其是 Safari）不会重新索引。稳妥做法是：
- 清空原
<datalist>内容：用innerHTML = ''或循环调用removeChild()； - 逐个创建
option元素并 append 到datalist，避免一次性写入 HTML 字符串（某些旧版 Edge 对 HTML 解析不一致）； - 如果数据量大（如上千项），别全塞进去——
datalist没有虚拟滚动，浏览器会卡顿，建议先做前端过滤再渲染； - 动态更新后无需手动“刷新”，但要确保
input的list属性仍指向正确的id。
真正难处理的是异步加载场景：用户快速输入，请求还没回来，提示就失效了。这时候不如退回到 JS 实现的 autocomplete 组件，datalist 适合静态、轻量、对体验要求不高的场景。
