原生 datalist 仅支持硬编码的前缀匹配且只读取 value 属性，无法实现拼音过滤；所谓“拼音搜索”完全依赖 js 动态替换 datalist 内容，需监听 input 事件、查拼音映射表并防抖更新 dom。
为什么原生 datalist 做不了拼音过滤
浏览器对 datalist 的匹配逻辑是硬编码的前缀匹配（startsWith()），且只读取 option 的 value 属性值——它不调用任何 JS 函数，也不识别拼音、首字母、模糊子串。所谓“输入‘b’出‘北京’”，其实是巧合：因为 value="北京" 的 UTF-8 字节序列以“北”开头，而“北”的 Unicode 码点在输入法上屏后被当作纯字符参与前缀比对；但“输入‘bei’不出‘北京’”，因为浏览器根本不会做拼音转换。
你看到的“拼音搜索”效果，100% 来自 JS 层主动接管：监听输入、查拼音映射表、动态重写 datalist.innerHTML。
input 事件 + 拼音映射表怎么配
核心不是改 datalist，而是用 JS 替换它的内容。关键步骤如下：
- 提前准备拼音映射：比如
["北京市", "上海市", "广州市"]→ 转成带拼音字段的对象数组，如{ name: "北京市", pinyin: "beijing" } - 监听
input事件（不是keyup，后者在中文输入法未上屏时就触发，会匹配到半截拼音） - 对每次输入值
query.trim()做小写归一化，再遍历数据，判断item.pinyin.includes(query.toLowerCase())或item.pinyin.startsWith(query.toLowerCase()) - 清空
document.getElementById("your-datalist-id").innerHTML，再用for或map生成新<option value="${item.name}">${item.name}</option> - 必须加防抖：用
setTimeout+clearTimeout缓存 timerId，避免每敲一个字都重刷 DOM
list 和 id 大小写/连字符不一致就静默失效
这是 90% 的人卡住的地方：浏览器既不报错，也不警告，只是让下拉建议彻底消失。常见错误包括：
-
<input list="cityList">对应<datalist id="cities-list"></datalist>（连字符 vs 驼峰） -
<input list="Cities">对应<datalist id="cities"></datalist>（大小写不一致） -
<input list="#cities">——list属性值不能带#，只写 ID 名本身 - JS 动态创建
datalist后再设input.list，但 DOM 尚未挂载完成，绑定失败
验证方法很简单：打开控制台，执行 document.querySelector('input[list]').list 和 document.getElementById(...) 是否能取到对应元素。
option 的 value 必须非空，且决定最终填入框的值
datalist 不看 textContent，不认 label，不支持 disabled。所有行为都绑定在 value 上：
-
<option>北京市</option>❌：无value，完全不参与匹配，也不会填入输入框 -
<option value="">北京市</option>❌：空字符串等同于无值 -
<option value="北京市">北京市</option>✅：显示和填入都是“北京市” -
<option value="beijing" label="北京市"></option>✅：Firefox/Chrome 会显示“北京市”，但用户选中后填入的是"beijing"—— 注意后端接收的是value，不是label
如果你希望用户看到“北京市”、提交“beijing”，就得靠 JS 控制：把 value 设为拼音或 ID，再用额外字段存展示名，选中后手动赋值给 input。
真正麻烦的不是写拼音转换，而是确保每次 DOM 更新后，旧版 Edge 或 iOS Safari 能正确弹出下拉——有时得补一句 input.focus()，但别在每次 input 事件里都调，只在过滤后且列表非空时触发一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
