核心原因是浏览器仅支持前缀匹配且不自动筛选，需确保list属性值与datalist的id完全一致、datalist在DOM中、仅用value提供文本；原生不支持模糊匹配或拼音，须JS手动实现。

为什么 input 加了 list 属性却没弹出联想词？

核心原因：浏览器只在 input 有 list 属性且对应 存在时才触发联想，但**不自动匹配输入内容**——它只是提供候选池，匹配逻辑由浏览器内部完成，且仅支持前缀匹配（即用户输“a”，只显示以“a”开头的 值）。

常见错误现象：input 输入后无下拉、点击也不展开、或显示全部选项不筛选。

• 检查 list 属性值是否与 的 id 完全一致（大小写敏感、无空格）
• 必须在 DOM 中（不能用 JS 动态插入后延迟绑定，部分浏览器不识别）
• 只能用 value 属性提供文本，label 属性仅作显示别名，不影响匹配
• Chrome/Edge 支持较好；Firefox 对空格、特殊字符匹配更严格；Safari 16.4+ 才完整支持 list + datalist

如何让联想词支持模糊匹配或中文拼音首字母？

原生 不支持。必须用 JS 拦截输入、手动过滤、动态渲染下拉列表。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

典型做法是监听 input 事件，用 Array.filter() 做字符串包含判断，再把结果塞进一个绝对定位的

中。

• 避免直接操作 —— 它是只读候选源，无法动态增删
• 用 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" 只禁用表单级自动填充（如邮箱、密码），对 联想词无效，也阻止不了 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 又触发重复渲染。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！