datalist 不会在 focus 时自动展开，因为其设计定位是“辅助输入”而非“下拉选择器”，仅在用户输入或点击下拉箭头时触发匹配；Chrome/Edge 113+ 可用 showPicker() 手动唤起，但需 setTimeout 延迟调用并 try/catch 兼容处理。
为什么 datalist 不会在 focus 时自动展开？
因为浏览器原生不支持 datalist 自动展开——它只在用户开始输入时触发匹配，或点击输入框右侧下拉箭头（部分浏览器）才显示候选。这不是 bug，是规范行为：datalist 的设计定位是“辅助输入”，而非“下拉选择器”。想让它在获得焦点就弹出，必须用 JavaScript 模拟触发。
用 showPicker() 在 focus 时手动唤起候选列表
Chrome 113+ 和 Edge 113+ 支持 <input> 元素的 showPicker() 方法，可主动打开原生候选面板。注意：该方法仅对绑定了 datalist 的 <input> 有效，且仅在用户手势（如 click/focus）触发的上下文中可用。
实操建议：
- 确保
<input list="xxx">中的list属性值与<datalist id="xxx">的id严格一致 - 在
focus事件中调用showPicker()，但需包裹在setTimeout(..., 0)中，避免同步调用被浏览器拒绝 - 加个
try/catch，因为 Safari 和旧版 Chrome 不支持该方法，会抛出TypeError
示例：
立即学习“前端免费学习笔记（深入）”；
<input id="city" list="cities" placeholder="输入城市">
<datalist id="cities">
<option value="北京">
<option value="上海">
<option value="广州">
</datalist>
<script>
const input = document.getElementById('city');
input.addEventListener('focus', () => {
setTimeout(() => {
try {
input.showPicker();
} catch (e) {
// ignore: Safari 或不支持的浏览器
}
}, 0);
});
</script>
兼容性 fallback：用 click() 模拟点击下拉按钮（仅限 Chromium）
某些 Chromium 版本（如 Chrome 105–112）未暴露 showPicker()，但可通过模拟点击输入框内部的伪元素触发候选面板。此法不稳定、无标准、极易失效，仅作临时过渡。
不推荐长期使用，但若必须兼容老版 Chromium，可尝试：
- 用
getBoundingClientRect()获取输入框右边缘坐标 - 用
document.elementFromPoint(x, y)检查是否命中下拉箭头区域（实际不可靠） - 更现实的做法是：降级为自建下拉菜单（如用
<div>+filter匹配），而非硬啃原生datalist
别踩坑：focus 时机、移动端和无障碍影响
datalist 候选面板本质是浏览器 UI，不受 CSS 控制，也无法监听展开/收起事件。容易忽略的关键点：
- 移动端 Safari 完全不支持
showPicker()，且多数 iOS 浏览器压根不渲染datalist候选框 - 用
setTimeout延迟调用是必须的——直接在focus回调里调showPicker()会被视为非用户激活操作而静默失败 - 屏幕阅读器通常不把
datalist当作可交互控件，自动展开反而可能破坏无障碍流 - 如果输入框初始有值，
showPicker()仍会显示全部<option>，不会自动过滤；过滤逻辑始终由浏览器在用户输入后执行
真要稳定控制候选行为，还是得放弃 datalist，改用带搜索的 <select> 或自定义组件。原生 datalist 的“自动展开”本质上是个妥协方案，不是可靠 API。
