datalist 联想功能依赖 input 的 list 属性与同页 datalist 的 id 严格匹配（大小写敏感），且 datalist 必须初始存在、不可隐藏；仅 value 属性参与匹配，移动端 safari 支持极弱，需 js 降级实现。
list 属性必须指向同页面存在的 datalist 的 id
不匹配就完全没联想效果，浏览器根本不触发下拉提示。常见错误是拼错 id 或漏写 datalist 标签本身。
-
input的list值（如list="cities"）必须和datalist的id="cities"完全一致，大小写敏感 -
datalist可以放在页面任意位置，不要求在input后面，但不能被display: none或hidden隐藏——隐藏后选项仍存在，但用户无法看到或选择 - 不支持嵌套或动态生成
datalist后再绑定：必须在 HTML 解析时就存在，用 JS 动态插入datalist后，需手动触发重载（实际无效），稳妥做法是初始 HTML 就包含它
option 里只有 value 生效，label 不影响输入联想
datalist 中的 option 只有 value 属性会被用于匹配和填充，label 仅作显示文本，不参与过滤逻辑。
- 输入 “sh” 会匹配所有
value开头为 “sh” 的option，哪怕label="上海 (Shanghai)"，只要value="Shanghai"才生效 -
option不需要闭合标签（<option value="beijing"></option>即可），但写成<option value="beijing"></option>会被忽略——HTML 规范中option是非自闭合元素 - 重复的
value会导致只显示第一个，后续同值项被跳过，不会报错但行为不可预期
移动端 Safari 对 datalist 支持极弱，别依赖它做核心功能
iOS 16.4 之前完全不支持 datalist 联想；16.4+ 仅部分机型有限支持，且不响应键盘方向键、不支持模糊匹配（只支持前缀匹配），体验远不如 Chrome / Firefox。
- Android WebView（基于 Chromium）基本可用，但微信内置浏览器（X5 内核）多数版本仍无视
datalist - 如果业务必须兼容 iOS，得用 JS 模拟：监听
input事件 + 维护候选数组 + 绝对定位浮层渲染，list/datalist只能当降级 fallback -
autocomplete="off"和datalist不冲突，但某些浏览器（如旧版 Edge）会因autocomplete设置而禁用datalist，建议删掉该属性
匹配逻辑是纯前端、无大小写敏感、不支持正则
浏览器原生匹配只做简单字符串前缀比对，全部小写处理后进行，没法控制“是否区分大小写”或“是否包含匹配”，也没法加权重或排序。
- 用户输 “BEI”，仍能匹配
value="beijing"；但输 “jing” 就不匹配——不支持子串搜索 - 无法让 “北京” 排在 “保定” 前面，顺序完全由
option在 HTML 中的书写顺序决定 - 想实现拼音首字母检索（如输 “b” 出 “北京、保定、包头”），必须把
value设为拼音（value="beijing"），而不是汉字
list 和 id 拼写，却忘了 datalist 根本没加进 DOM——它不像 select 那样显眼，漏写很难一眼发现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
