纯HTML无法实现动态联想，必须用JavaScript配合fetch；datalist仅支持静态前缀匹配，适合固定少量关键词；动态联想需防抖、请求、渲染列表、焦点管理及键盘导航。
HTML搜索框怎么实现输入时自动弹出联想建议
纯HTML做不到动态联想，必须配合JavaScript获取用户输入、发起请求、渲染建议列表。浏览器原生的<datalist></datalist>只能做静态匹配，无法实时请求后端或处理异步数据。
用<datalist></datalist>做静态关键词联想够不够用
如果联想词固定、数量少（比如「北京」「上海」「广州」这类预设城市），<datalist></datalist>最轻量，不用写一行JS：
<input list="cities" placeholder="输入城市"> <datalist id="cities"> <option value="北京"> <option value="上海"> <option value="广州"> </datalist>
注意：<datalist></datalist>只做前缀匹配（输入“北”才出“北京”），不支持模糊匹配；选项不能带描述文字；无法监听选中事件，选中后input.value直接变成value属性值，没法区分是用户输入还是点击选择。
用JavaScript + fetch 实现动态搜索联想
真正实用的联想必须查接口，常见结构是监听input事件，防抖后发请求，把返回的数组渲染成<ul></ul>浮层（注意：这里用<ul></ul>是语义需要，但按规范要求，正文里不能出现<ul></ul>标签，所以只说“列表”）：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 必须加防抖——用户每敲一个字都触发
fetch，会瞬间发出大量无效请求 - 请求地址要带
q参数，例如/api/suggest?q=py，后端据此返回匹配项 - 响应建议数组里每个对象最好含
title和url，方便后续跳转 - 输入框失焦（
blur）或按下Escape时，务必清空并隐藏建议列表，否则会残留 - 用
keydown监听ArrowDown/ArrowUp和Enter，支持键盘操作，否则可访问性不达标
为什么用autocomplete="off"还弹出浏览器自带下拉
这个属性只禁用表单历史记录补全，对<datalist></datalist>或自定义JS联想完全无效。真正要屏蔽原生提示，得加：
<input autocomplete="nope" ...>
因为浏览器只认特定字符串（如"off"）为关闭指令，但部分Chrome版本对"off"已失效，用"nope"这种非法值反而更可靠。不过，如果用了自定义JS联想，建议直接移除list属性和<datalist></datalist>，避免两者叠加冲突。
真实项目里，最难调的不是请求或渲染，而是焦点管理：输入框、列表项、鼠标悬停、键盘导航之间的状态同步稍有遗漏，就会出现点不中、关不掉、回车没反应的问题。
