datalist 本身不触发下拉，需 input 的 list 属性与 datalist 的 id 完全一致（大小写、空格、引号均敏感）；仅支持前缀匹配，不支持模糊搜索；动态更新需防抖、清空旧节点并设 value；定制需求超出其能力边界时应换方案。
datalist 标签本身不“插入”搜索建议，它只是提供一个浏览器可读的建议池；真正触发下拉提示的是 input 元素的 list 属性——没这个属性，datalist 就是段被忽略的 HTML。
为什么写了 datalist 却没下拉？
最常见原因是关联失效：浏览器只认 input 的 list 属性值和 datalist 的 id 是否**完全一致**（大小写、空格、引号都算）。
-
<input list="cities"><datalist id="Cities">→ 失效（C 大小写不匹配） -
<input list=" cities "><datalist id="cities">→ 失效（前后空格） -
<input><datalist id="cities">→ 完全无响应（缺list属性） -
<input list="cities"><datalist id="cities"/>→ 失效（datalist必须闭合，不能自闭合）
datalist 只支持前缀匹配，不是模糊搜索
用户输入 “sh”，Chrome 会匹配 <option value="Shanghai">，但不会匹配 <option value="Hangzhou"> —— 因为 “sh” 不是 “Hangzhou” 的前缀。这不是 bug，是规范行为。
- 匹配逻辑由浏览器实现，不统一：Firefox 偶尔做子串匹配，Chrome 主要前缀，Safari 表现更保守
-
label属性仅用于显示（如<option value="SH" label="上海">），不影响匹配，部分浏览器甚至忽略它 - 大小写不敏感匹配是主流，但别依赖：有些旧版 Edge 仍区分
- 若需 “sh” 匹配 “深圳”“杭州”，必须用 JS +
fetch+input事件重做整套逻辑
动态更新 datalist 时容易卡顿或重复
想根据用户输入实时拉取 API 建议？直接在 input 的 input 事件里反复操作 datalist DOM，很容易出问题。
- 别用
innerHTML += <option>...</option>：触发多次重排，移动端尤其明显 - 别漏清空旧节点：用
replaceChildren()（现代浏览器）或先innerHTML = ""再批量插入 - 每个
option必须设value，JS 创建时写成opt.value = item.name，别只塞文本节点 - 加防抖：输入长度
< 2就不发请求；连续输入时，上一个请求未返回就取消它（用AbortController）
真正难的不是写对 datalist，而是接受它的边界：它不响应键盘导航、不支持高亮、不能加 class 或 img、移动端 Safari 渲染不稳定——这些地方一旦有定制需求，就得换方案，而不是硬改 datalist。
