datalist失效主因是list与id属性值不一致，须逐字符比对；option必须含value属性才参与前缀匹配；模糊搜索需JS监听input事件动态重写innerHTML并防抖；移动端及旧浏览器渲染不稳定，建议用自定义下拉替代。
list属性和id不一致导致datalist完全失效
这是最常踩的坑：浏览器不会报错，也不会提示，只是静默跳过绑定。比如list="cities"对应<datalist id="Cities">（大小写不同），或list="city-list"但实际id="cityList"（连字符 vs 驼峰）。必须逐字符比对，包括空格、大小写、连字符。
另外注意：datalist不能放在input标签内部；也不能用display: none隐藏——得用visibility: hidden或position: absolute; left: -9999px移出视口。
option没写value就等于没写
<option>北京</option>看起来没问题，但浏览器根本不把它当候选值。匹配逻辑只读value属性，textContent仅用于显示，不参与检索。
-
<option value="Beijing">北京市</option>✅ 输入“Bei”可匹配 -
<option value="beijing">北京市</option>✅ 注意大小写影响结果 -
<option value="">北京市</option>❌ 空字符串等同于无值 -
<option>北京市</option>❌ 没value，完全不参与匹配
原生datalist只支持前缀匹配，模糊搜索必须JS重写
输入“hrome”找不到value="Chrome"，是因为浏览器只做startsWith()，不是includes()。所谓“模糊搜索”，全靠监听input事件，动态清空并重写datalist.innerHTML。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 用
input.addEventListener('input', ...)，别用change（失焦才触发） - 每次先清空：
datalist.innerHTML = '' - 筛选用
.filter(item => item.toLowerCase().includes(query.toLowerCase())) - 插入新
<option value="${item}">${displayText}</option> - 加防抖：高频输入下，用
setTimeout+clearTimeout确保只执行最后一次
移动端和旧浏览器渲染不稳定
部分旧版Edge/IE11在JS动态插入option后，不会自动弹出下拉；Safari有时要失焦后才渲染。临时补input.focus()可能生效，但别滥用——它会打断用户光标位置，且在某些场景触发滚动。
更稳妥的做法是：把datalist当降级 fallback，主逻辑用<div class="suggestions">模拟下拉。这样能控制高亮、键盘导航（↑↓Enter）、点击选中，也避免了datalist对DOM变更不响应的限制。
真正容易被忽略的是：你没法靠MutationObserver监听datalist子节点变化来“修复”这个限制——浏览器规范里就明确不响应。
