js中实现输入智能提示
实现输入智能提示的方法
监听输入事件
使用 input 事件监听用户输入，实时获取输入框的值。keyup 事件也可用，但可能有轻微延迟。
const inputElement = document.getElementById('search-input');
inputElement.addEventListener('input', handleInput);防抖处理
避免频繁触发搜索请求，使用防抖函数控制请求频率。设置 300-500ms 的延迟能平衡响应速度和性能。
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
const debouncedHandleInput = debounce(handleInput, 300);
inputElement.addEventListener('input', debouncedHandleInput);数据匹配算法
根据输入值过滤建议列表，不区分大小写匹配更友好。模糊匹配可使用 includes 或正则表达式。
function getSuggestions(input) {
const suggestions = ['JavaScript', 'TypeScript', 'React', 'Vue'];
return suggestions.filter(item =>
item.toLowerCase().includes(input.toLowerCase())
);
}展示建议列表
动态创建 DOM 元素显示匹配结果，使用绝对定位让下拉框跟随输入框。建议项可点击填充到输入框。
function showSuggestions(suggestions) {
const container = document.getElementById('suggestions-container');
container.innerHTML = '';
suggestions.forEach(item => {
const div = document.createElement('div');
div.textContent = item;
div.addEventListener('click', () => {
inputElement.value = item;
container.innerHTML = '';
});
container.appendChild(div);
});
}样式优化
为下拉框添加基础样式，确保层级高于其他元素。hover 效果和边框能提升用户体验。
#suggestions-container {
position: absolute;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
}
#suggestions-container div {
padding: 8px;
cursor: pointer;
}
#suggestions-container div:hover {
background-color: #f0f0f0;
}远程数据获取
如需从服务器获取建议，使用 fetch 或 axios 发起请求。注意处理请求取消和错误情况。
async function fetchSuggestions(input) {
try {
const response = await fetch(`/api/suggestions?q=${input}`);
return await response.json();
} catch (error) {
console.error('Fetch error:', error);
return [];
}
}键盘导航支持
通过监听 keydown 事件实现上下箭头选择建议项。Enter 键可确认当前选中项。
inputElement.addEventListener('keydown', (e) => {
const items = document.querySelectorAll('#suggestions-container div');
let currentIndex = Array.from(items).findIndex(item =>
item.classList.contains('active')
);
if (e.key === 'ArrowDown') {
e.preventDefault();
currentIndex = (currentIndex + 1) % items.length;
} else if (e.key === 'ArrowUp') {
e.preventDefault();
currentIndex = (currentIndex - 1 + items.length) % items.length;
} else if (e.key === 'Enter' && currentIndex >= 0) {
inputElement.value = items[currentIndex].textContent;
document.getElementById('suggestions-container').innerHTML = '';
return;
}
items.forEach((item, index) =>
index === currentIndex
? item.classList.add('active')
: item.classList.remove('active')
);
});
