JavaScript 实现搜索框联想功能（autocomplete）

JavaScript 和 CSS 实现搜索框联想功能（Autocomplete）

搜索框联想功能（Autocomplete）是一种常见的交互效果，用户在输入时，下方会显示匹配的建议列表，便于快速选择。以下是一个使用纯 JavaScript 和 CSS 实现的简洁 autocomplete 功能，支持实时过滤和键盘导航。

实现思路

1. HTML 结构：

• 一个输入框（<input>）用于用户输入。
• 一个容器（<div>）显示建议列表（<ul>），动态生成 <li> 项。

1. CSS 样式：

• 搜索框：美化输入框，添加边框和内边距。
• 建议列表：绝对定位在输入框下方，带阴影和滚动条。
• 高亮：为选中项（鼠标 hover 或键盘选择）添加背景色。

1. JavaScript 逻辑：

• 监听输入框的 input 事件，实时过滤建议列表。
• 使用数组存储预定义的建议词，过滤出包含输入内容的项。
• 动态生成建议列表，显示在输入框下方。
• 支持键盘导航（上下键选择，Enter 键确认，Esc 键关闭）。
• 点击建议项填充输入框并关闭列表。

1. 扩展性：

• 可从后端 API 获取动态建议。
• 支持防抖（debounce）优化频繁输入。
• 添加高亮匹配文本或模糊搜索。

完整代码示例

以下是完整的 HTML、CSS 和 JavaScript 代码，保存为 .html 文件即可在浏览器中运行测试。

搜索框联想功能