datalist本身不响应输入事件，仅静态提供前缀匹配建议，必须配合js才能实现动态过滤与搜索功能。
为什么 datalist 不能直接响应用户输入并动态过滤选项
因为 datalist 本身只是静态选项容器，不带任何 JavaScript 行为——它不会监听 input 事件，也不会自动匹配、隐藏或更新 option。浏览器只在用户手动点击下拉或按箭头键时展示全部 option，且匹配逻辑仅限于“开头匹配”（部分浏览器支持子串，但不可靠）。所以纯 HTML 实现不了真正的搜索提示（autocomplete），必须配合 JS。
如何用 input + datalist 做基础静态提示
这是最简可用形态，适合选项固定、数量少（
<input list="browsers" name="browser"><datalist id="browsers"><option value="Chrome"></option> <option value="Firefox"></option> <option value="Safari"></option></datalist>
-
input必须有list属性，值为datalist的id -
option只能用value，不支持label或自定义显示文本 - 移动端 Safari 对
datalist支持弱，可能完全不显示下拉 - 无法禁用默认下拉箭头，也无法控制弹出位置或样式
为什么给 datalist 动态写入 option 仍不触发更新
即使你用 JS 清空再重写 datalist.innerHTML，浏览器也不会立刻刷新下拉菜单——它的渲染时机不响应 DOM 变更，而是绑定在 input 获得焦点或用户交互瞬间。常见错误是以为“更新了 datalist 就等于更新了提示”，结果用户看到的还是旧选项。
- 必须在用户输入后、焦点仍在
input时，主动触发一次input元素的focus()或模拟一次keydown才可能强制重绘（但不可靠） - 更稳妥的做法：不依赖
datalist的自动弹出，改用自定义div浮层 +position: absolute模拟提示框 - 若坚持用
datalist，只能接受“每次输入后需失焦再聚焦”才能看到新选项——体验极差，不推荐
真正可用的轻量级替代方案：用 input + div + 简单 JS 过滤
放弃 datalist 的原生限制，自己控制提示浮层，代码量增加不到 20 行，兼容性与可控性翻倍：
const input = document.querySelector('input[name="search"]');
const suggestions = ['apple', 'application', 'banana', 'cherry'];
input.addEventListener('input', () => {
const val = input.value.toLowerCase();
const matches = suggestions.filter(s => s.toLowerCase().includes(val));
// 渲染到一个预设的 <div class="suggestions"> 中
});
<ul>
<li>过滤逻辑可自由定制：前缀匹配、模糊匹配、加权排序都由你决定</li>
<li>提示项可含 HTML（图标、高亮关键词），<code>datalist</code> 完全不支持</li>
<li>键盘导航（↑↓/Enter）可完整实现，<code>datalist</code> 的键盘支持各浏览器不一致</li>
<li>注意：别忘了处理 <code>blur</code> 事件隐藏浮层，否则点击外部时提示还挂着</li>
</ul>
<p>原生 <code>datalist</code> 的价值只剩语义化和极简配置，真要交付可用的搜索提示，绕不开 JS 控制渲染时机和内容。</p>
</div>
