纯HTML无法实现动态联想，必须用JavaScript配合fetch；datalist仅支持静态前缀匹配，适合固定少量关键词；动态联想需防抖、请求、渲染列表、焦点管理及键盘导航。

HTML搜索框怎么实现输入时自动弹出联想建议

纯HTML做不到动态联想，必须配合JavaScript获取用户输入、发起请求、渲染建议列表。浏览器原生的只能做静态匹配，无法实时请求后端或处理异步数据。

用做静态关键词联想够不够用

如果联想词固定、数量少（比如「北京」「上海」「广州」这类预设城市），最轻量，不用写一行JS：

<input list="cities" placeholder="输入城市"><datalist id="cities"><option value="北京"></option>
<option value="上海"></option>
<option value="广州"></option></datalist>

注意：只做前缀匹配（输入“北”才出“北京”），不支持模糊匹配；选项不能带描述文字；无法监听选中事件，选中后input.value直接变成value属性值，没法区分是用户输入还是点击选择。

用JavaScript + fetch 实现动态搜索联想

真正实用的联想必须查接口，常见结构是监听input事件，防抖后发请求，把返回的数组渲染成

浮层（注意：这里用

是语义需要，但按规范要求，正文里不能出现

标签，所以只说“列表”）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 必须加防抖——用户每敲一个字都触发fetch，会瞬间发出大量无效请求
• 请求地址要带q参数，例如/api/suggest?q=py，后端据此返回匹配项
• 响应建议数组里每个对象最好含title和url，方便后续跳转
• 输入框失焦（blur）或按下Escape时，务必清空并隐藏建议列表，否则会残留
• 用keydown监听ArrowDown/ArrowUp和Enter，支持键盘操作，否则可访问性不达标

为什么用autocomplete="off"还弹出浏览器自带下拉

这个属性只禁用表单历史记录补全，对或自定义JS联想完全无效。真正要屏蔽原生提示，得加：

<input autocomplete="nope" ...>

因为浏览器只认特定字符串（如"off"）为关闭指令，但部分Chrome版本对"off"已失效，用"nope"这种非法值反而更可靠。不过，如果用了自定义JS联想，建议直接移除list属性和，避免两者叠加冲突。

真实项目里，最难调的不是请求或渲染，而是焦点管理：输入框、列表项、鼠标悬停、键盘导航之间的状态同步稍有遗漏，就会出现点不中、关不掉、回车没反应的问题。

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