支持下拉提示又不限制输入的关键是使用 datalist 提供前缀匹配建议，用户仍可自由输入；需通过 list 属性关联 ，监听 input 事件获取值，动态更新时应清空并逐个添加 元素。

如何让 <input> 支持下拉提示但又不限制输入内容

关键在于 datalist 不是下拉选择器，而是“提示列表”——它只提供可选值建议，用户仍可自由输入任意内容。这点常被误当成 select 的替代品，结果发现无法限制输入、也无法监听选项点击事件。

正确用法是：给 <input> 设置 list 属性，指向一个 <datalist></datalist> 元素的 id：

<input type="text" list="browsers"><datalist id="browsers"><option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Safari"></option></datalist>

注意：<datalist></datalist> 里的 <option></option> 只需要 value，不要用 label 或嵌套文本；浏览器只会匹配 value 字符串前缀，不支持模糊或正则匹配。

datalist 在不同浏览器中的兼容性表现

Chrome / Edge / Firefox 均支持，但行为有差异：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 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></datalist> 的 innerHTML 然后指望提示立刻生效——部分浏览器（尤其是 Safari）不会重新索引。稳妥做法是：

• 清空原 <datalist></datalist> 内容：用 innerHTML = '' 或循环调用 removeChild()；
• 逐个创建 option 元素并 append 到 datalist，避免一次性写入 HTML 字符串（某些旧版 Edge 对 HTML 解析不一致）；
• 如果数据量大（如上千项），别全塞进去——datalist 没有虚拟滚动，浏览器会卡顿，建议先做前端过滤再渲染；
• 动态更新后无需手动“刷新”，但要确保 input 的 list 属性仍指向正确的 id。

真正难处理的是异步加载场景：用户快速输入，请求还没回来，提示就失效了。这时候不如退回到 JS 实现的 autocomplete 组件，datalist 适合静态、轻量、对体验要求不高的场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！