为什么 datalist 和 input 关联后没效果？
最常见原因是没加 list 属性，或者属性值和 datalist 的 id 不匹配。浏览器只认这个绑定关系，缺一不可。
必须确保：
input有list属性，且值是纯字符串（比如list="country-list"）datalist有对应id="country-list"，不能是class或其他属性input类型建议为text、search、url等支持自动补全的类型；type="number"或type="date"通常不触发datalist
如何让 option 值真正参与匹配？
datalist 中的 option 只有 value 属性会被用于匹配和填充，label 仅作显示用，不参与搜索逻辑。
常见误区：
立即学习“前端免费学习笔记（深入）”；
- 写成
<option>中国</option>—— 没有value，输入“中”不会匹配 - 写成
<option label="CN">China</option>—— 浏览器只按 “China” 匹配，label不影响输入行为 - 正确写法：
<option value="China">?? China</option>，既可输入“Chi”触发，又显示带图标的内容
datalist 的兼容性与实际限制有哪些？
它在 Chrome、Edge、Firefox、Safari（12.1+）都支持，但行为细节差异明显：
- Safari 不支持键盘方向键选择
option，只能鼠标点选 - 所有浏览器都不支持模糊匹配（比如输“hina”无法匹配“China”），只支持前缀匹配
- 没有原生事件监听补全动作，
input的change或input事件无法区分是用户输入还是选中datalist项 - 移动端 iOS Safari 会显示候选栏，但点击后常清空再填入，体验割裂
若需高亮、拼音搜索或远程加载，datalist 不够用，得换 autocomplete 库或自建下拉。
怎么动态更新 datalist 里的选项？
直接操作 DOM 即可，但要注意：已打开的下拉面板不会自动刷新，用户得再次聚焦 input 才能看到新选项。
示例（追加一个选项）：
<datalist id="city-list">
<option value="Beijing">北京</option>
</datalist>
<script>
const list = document.getElementById('city-list');
const opt = document.createElement('option');
opt.value = 'Shenzhen';
opt.textContent = '深圳';
list.appendChild(opt);
</script>注意：textContent 不影响匹配逻辑，只控制下拉里显示的文字；匹配始终以 value 为准。
如果数据量大（比如上千条），别全塞进 datalist，浏览器渲染会卡顿——这时候该上虚拟滚动 + 输入防抖 + fetch 动态加载了。
