datalist在移动端受限于输入法独立机制、WebView兼容性差（如X5内核禁用渲染）、iOS Safari触控逻辑弱及Android碎片化版本，需JS降级兜底。
移动端输入法和datalist的匹配逻辑不互通
输入法（如 Gboard、华为小艺、iOS 键盘）的“词库联想”和 datalist 的浏览器原生匹配是两套独立机制，互不影响。用户在 input 中打字时，看到的候选词来自输入法本地词库，不是 datalist 的 option；datalist 下拉只在满足触发条件时由浏览器渲染，和输入法弹出的软键盘候选栏完全无关。
常见误解是“输入法能搜到城市名，那 datalist 也应该自动出来”，但事实是：即使输入法显示了“北京”，datalist 也不会因此被激活——它只响应输入行为本身（按键、粘贴、点击箭头），不读取输入法的语义或预测结果。
- Android 上多数输入法不会向网页暴露候选词，
datalist无法感知“用户想输什么”，只能等真实字符落进input.value - iOS Safari 输入法在中文拼音模式下，首字输入后可能触发
datalist，但纯拼音（如 “bj”）不匹配value="Beijing"，因为浏览器只做前缀/子串匹配，不做拼音转换 - 部分定制 ROM（如 MIUI、ColorOS）会拦截或重写 input 事件，导致
input的input事件延迟或丢失，进一步削弱datalist响应
微信/QQ 内置浏览器中 datalist 完全失效的典型现象
在微信内置浏览器（X5 内核）、QQ 浏览器（X5 或 QX5）、部分银行 App WebView 中，datalist 的下拉 UI 被直接禁用，即使 list 和 id 完全匹配、option 带有效 value，也看不到任何下拉项。
这不是 bug，而是这些 WebView 主动移除了对 datalist 渲染层的支持——它们仍允许用户手动输入并提交 value，但不提供视觉反馈和鼠标/触控选择能力。
立即学习“前端免费学习笔记（深入）”；
- 验证方式：在手机 Chrome 中打开同一页面，若正常显示下拉，则确认是 X5/QX5 WebView 兼容性问题
- 降级策略：检测
'list' in HTMLInputElement.prototype，为 false 时切换为 JS 模拟下拉（如<div class="suggestions">+input.addEventListener('input', ...)） - 避免用
type="search"或type="email"，X5 内核对这类 type 的list支持更差，统一用type="text" inputmode="text"最稳妥
Android WebView 版本差异导致的“有时有、有时无”
Android 系统 WebView 对 datalist 的支持从 Android 12（Chromium 90+）开始趋于稳定，但旧版（尤其是 Android 10 及以下）存在大量碎片化表现：有的机型只渲染空白下拉框，有的点击箭头才出现但无文字，有的甚至完全静默。
关键点在于：WebView 版本 ≠ 系统版本 ≠ Chrome 版本。厂商可能冻结 WebView 更新（如某些低端机长期停留在 Chromium 75），导致 datalist 行为不可预测。
- 不要依赖
DOMContentLoaded后立即可用——某些 WebView 需要首次聚焦 input 才初始化 datalist 渲染通道 - 动态插入
option后，需确保datalist已挂载到 DOM，且未被 WebView 提前销毁（建议在<body>底部静态声明datalist，而非 JS 动态创建） - 测试时务必覆盖真机：模拟器通常用最新 WebView，无法复现低端机的真实问题
为什么 iOS Safari 在部分机型上点了没反应
iOS Safari 直到 iOS 15.4 才完整支持 datalist 的触控展开逻辑。在 iOS 14.x 或更早版本中，用户必须先输入至少一个字符，再点击输入框右侧的小箭头（如果可见），才可能唤出下拉；纯点击输入框焦点不会触发列表。
更麻烦的是：Safari 的触控区域识别极弱。箭头图标尺寸小、位置偏右、无 hover 状态，很多用户根本没注意到它的存在，误以为功能失效。
- 不要指望用户主动点箭头——移动端用户习惯是“直接打字”，所以必须保证输入即匹配（哪怕只输一个字）
- iOS 上
type="search"比type="text"更容易触发下拉，但搜索图标可能被遮挡，建议加 CSS 微调 padding-right - 若发现 iOS 用户反馈“输完没反应”，优先检查是否用了
type="number"或type="email"——Safari 对这两类 type 的datalist支持最差，强制切回type="text"并前端校验
