list属性必须搭配且id严格匹配才生效，仅前缀匹配、不支持模糊搜索，value为提交值，label仅显示，ios safari基本不支持。
list 属性必须搭配 <datalist></datalist> 才能生效，且 ID 必须严格匹配
单独写 list 属性没用，浏览器根本不会触发下拉建议。关键在于：<input list="xxx"> 中的 xxx 必须和 <datalist id="xxx"></datalist> 的 id 完全一致（区分大小写、不能有空格）。常见错误是拼错 ID、多写了引号或用了 class 名代替 id。
示例正确写法：
<input list="browsers" name="browser"><datalist id="browsers"><option value="Chrome"></option> <option value="Firefox"></option> <option value="Safari"></option></datalist>
原生 <datalist></datalist> 不支持模糊搜索，只做前缀匹配
用户输入 “ire” 无法匹配 “Firefox”，必须从开头匹配 —— 即输入 “Fire” 才会显示。这是浏览器原生行为，无法通过 HTML 或 CSS 关闭或修改。如果业务需要“包含匹配”或“拼音首字母搜索”，必须放弃原生 list + <datalist></datalist>，改用 JS 实现（比如监听 input 事件 + 动态渲染 <ul></ul> 列表）。
可验证的行为：
- 输入 “c” → 显示 “Chrome”
- 输入 “rome” → 不显示任何选项（非前缀）
- 输入 “Chrome” 后回车/失焦 → 表单提交值就是 “Chrome”，不是空字符串
<option></option> 的 value 是唯一有效字段，label 仅用于显示别名
<datalist></datalist> 内部只认 <option value="xxx"></option>；label 属性只是让下拉项显示更友好，但不影响实际提交值。例如：
<option value="ff" label="Firefox"></option>
用户看到的是 “Firefox”，但表单提交时该 <input> 的值是 "ff"，不是 "Firefox"。这点常被误以为是 bug —— 其实是设计如此。
注意事项：
- 不要依赖
innerText或textContent获取选中值，一律读input.value -
<option></option>不支持嵌套标签，不支持data-*属性透传（如需额外元数据，得靠 JS 维护映射表） - 重复的
value会导致下拉出现多个相同选项，浏览器不校验去重
移动端兼容性差，iOS Safari 基本不显示下拉面板
Android Chrome 大部分版本支持，但 iOS Safari（包括最新版）对 <datalist></datalist> 支持极弱：点击输入框不会弹出选项列表，只有键盘自动补全可能偶然触发（不可控）。这不是 bug，是 Apple 明确未实现该特性。
如果你的用户有显著 iOS 流量，别押注原生方案。临时缓解办法有限：
- 加 JS 检测
if (!'list' in document.createElement('input'))判断是否支持 - 降级为纯
<select></select>（但失去自由输入能力） - 用第三方库如
awesomplete或手写轻量 autocomplete（监听input+focus+ 键盘事件）
真正可靠的可搜索下拉，终究要脱离 list 属性，自己控制展示逻辑和数据过滤 —— 原生方案只适合 PC 端低交互要求的场景。
