先搭建HTML结构并监听输入事件，通过过滤数据源匹配建议，渲染到下拉列表，支持点击填充和键盘上下键导航及回车确认，实现完整自动补全功能。
开发一个搜索框自动补全插件，核心是监听用户输入、匹配建议数据、动态展示结果并支持键盘操作。下面带你一步步实现一个轻量但功能完整的 JavaScript 搜索自动补全插件，不依赖任何框架。
1. 基本结构与HTML搭建
先定义搜索框和下拉建议列表的结构：
这个容器包含输入框和用于显示建议的无序列表。样式可以后续添加，确保下拉层定位准确。
2. 核心逻辑：输入监听与建议匹配
使用 addEventListener 监听输入事件，实时过滤数据源：
创建一个函数来初始化插件，接收输入框元素和数据源（可以是数组）：
function initAutocomplete(inputElement, dataSource) {
const suggestionsList = document.querySelector('.suggestions');
inputElement.addEventListener('input', function (e) {
const value = e.target.value.trim().toLowe
rCase();
if (!value) {
suggestionsList.innerHTML = '';
return;
}
// 过滤匹配项
const matches = dataSource.filter(item =>
item.toLowerCase().includes(value)
);
// 渲染建议
renderSuggestions(matches);
});
}
rCase();
if (!value) {
suggestionsList.innerHTML = '';
return;
}这里通过 filter 方法找出包含输入关键词的数据项，然后调用渲染函数。
3. 渲染建议项并绑定点击选择
将匹配结果插入到下拉列表中，并让每一项可点击填充到输入框：
function renderSuggestions(matches) {
const suggestionsList = document.querySelector('.suggestions');
suggestionsList.innerHTML = '';
matches.forEach(match => {
const li = document.createElement('li');
li.textContent = match;
li.addEventListener('click', function () {
document.getElementById('searchInput').value = match;
suggestionsList.innerHTML = '';
});
suggestionsList.appendChild(li);
});
}
点击某一项时，将其文本填入输入框，并清空建议列表。
4. 支持键盘上下选择与回车确认
增强用户体验，允许用方向键在建议中导航：
在插件中维护一个高亮索引，监听键盘事件：
let highlightIndex = -1;inputElement.addEventListener('keydown', function (e) { const items = suggestionsList.querySelectorAll('li'); if (!items.length) return;
if (e.key === 'ArrowDown') { e.preventDefault(); highlightIndex = (highlightIndex + 1) % items.length; highlight(items); } else if (e.key === 'ArrowUp') { e.preventDefault(); highlightIndex = (highlightIndex - 1 + items.length) % items.length; highlight(items); } else if (e.key === 'Enter') { e.preventDefault(); if (highlightIndex >= 0) { inputElement.value = items[highlightIndex].textContent; suggestionsList.innerHTML = ''; highlightIndex = -1; } } });
function highlight(items) { items.forEach((item, index) => { item.classList.toggle('highlighted', index === highlightIndex); }); }
为 .highlighted 添加CSS样式（如背景变蓝），让用户清楚当前选中项。
基本上就这些。你现在已经拥有一个具备输入过滤、点击选择、键盘导航的完整自动补全功能。可根据需要扩展远程数据加载、防抖、模糊匹配等特性。不复杂但容易忽略细节，比如清空建议、事件解绑等。
