核心原因是浏览器仅支持前缀匹配且不自动筛选，需确保list属性值与datalist的id完全一致、datalist在DOM中、仅用value提供文本；原生不支持模糊匹配或拼音，须JS手动实现。
为什么 input 加了 list 属性却没弹出联想词？
核心原因：浏览器只在 input 有 list 属性且对应 <datalist></datalist> 存在时才触发联想，但**不自动匹配输入内容**——它只是提供候选池，匹配逻辑由浏览器内部完成，且仅支持前缀匹配（即用户输“a”，只显示以“a”开头的 <option></option> 值）。
常见错误现象：input 输入后无下拉、点击也不展开、或显示全部选项不筛选。
- 检查
list属性值是否与<datalist id="..."></datalist>的id完全一致（大小写敏感、无空格） -
<datalist></datalist>必须在 DOM 中（不能用 JS 动态插入后延迟绑定，部分浏览器不识别） -
<option></option>只能用value属性提供文本，label属性仅作显示别名，不影响匹配 - Chrome/Edge 支持较好；Firefox 对空格、特殊字符匹配更严格；Safari 16.4+ 才完整支持
list+datalist
如何让联想词支持模糊匹配或中文拼音首字母？
原生 <datalist></datalist> 不支持。必须用 JS 拦截输入、手动过滤、动态渲染下拉列表。
典型做法是监听 input 事件，用 Array.filter() 做字符串包含判断，再把结果塞进一个绝对定位的 <div class="suggestions"> 中。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>避免直接操作 <code><datalist></datalist> —— 它是只读候选源，无法动态增删 <option></option>
position: absolute + top: 100% 对齐输入框底部，注意 z-index 和滚动时位置偏移pinyin 库（如 pinyin-pro）预生成拼音首字母索引，加速匹配<input type="text" id="search"> <div id="suggestions" class="suggestions"></div>
移动端点击输入框后键盘弹出但联想层被顶起或遮挡？
这是 viewport 缩放和软键盘推升视口导致的布局重排问题，不是 CSS 能单靠 position: fixed 解决的。
- 监听
focus事件，在 iOS 上可尝试setTimeout(() => window.scrollTo(0, 0), 100)强制归位 - 安卓 WebView 需检查
android:windowSoftInputMode="adjustResize"是否启用 - 避免给
#suggestions设固定高度，改用max-height+overflow-y: auto - 关键：不要依赖
window.innerHeight计算位置，改用getBoundingClientRect()获取输入框实时坐标
为什么用 autocomplete="off" 还会弹出浏览器地址栏历史？
因为 autocomplete="off" 只禁用表单级自动填充（如邮箱、密码），对 <datalist></datalist> 联想词无效，也阻止不了 Chrome 地址栏下拉历史（尤其当 name="q" 或 name="search" 时）。
- 真正有效的是给
input加name属性设为非语义化值，比如name="search-input-123" - 若需彻底关闭所有自动补全，加
autocomplete="nope"（Chrome 会忽略off，但认nope） - 服务端接口返回联想词时，务必校验 Origin 并设置
Access-Control-Allow-Origin，否则跨域请求失败静默
datalist 简单但能力有限；真要支持拼音、模糊、远程加载、键盘导航（↑↓回车），就得自己搭一套 suggestion 组件——这时候容易忽略的是焦点管理：用户用键盘选中选项后，input 的 value 要同步，且 blur 时得销毁下拉层，否则下次 focus 又触发重复渲染。
