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