当前位置：首页 > JavaScript

js实现联想输入

2026-04-04 06:55:14JavaScript

联想输入实现方法

联想输入（或自动补全）功能可通过监听输入框事件并动态匹配数据实现。以下是基于JavaScript的实现方案：

js实现联想输入

基础HTML结构

<input type="text" id="searchInput" placeholder="输入关键词">
<ul id="suggestions"></ul>

数据准备

const data = ['苹果', '香蕉', '橙子', '葡萄', '西瓜', '芒果'];

事件监听与匹配

const input = document.getElementById('searchInput');
const suggestions = document.getElementById('suggestions');

input.addEventListener('input', function() {
    const value = this.value.trim();
    suggestions.innerHTML = '';

    if (!value) return;

    const filtered = data.filter(item => 
        item.toLowerCase().includes(value.toLowerCase())
    );

    filtered.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        li.addEventListener('click', () => {
            input.value = item;
            suggestions.innerHTML = '';
        });
        suggestions.appendChild(li);
    });
});

样式优化

#suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    max-height: 200px;
    overflow-y: auto;
}

#suggestions li {
    padding: 8px 12px;
    cursor: pointer;
}

#suggestions li:hover {
    background-color: #f5f5f5;
}

高级优化方案

防抖处理

let timer;
input.addEventListener('input', function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        // 原有处理逻辑
    }, 300);
});

远程数据获取

async function fetchSuggestions(query) {
    const response = await fetch(`/api/suggest?q=${query}`);
    return await response.json();
}

input.addEventListener('input', async function() {
    const value = this.value.trim();
    if (value.length < 2) return;

    const results = await fetchSuggestions(value);
    // 渲染结果
});

键盘导航支持

let activeIndex = -1;

input.addEventListener('keydown', (e) => {
    const items = suggestions.querySelectorAll('li');

    if (e.key === 'ArrowDown') {
        activeIndex = Math.min(activeIndex + 1, items.length - 1);
    } else if (e.key === 'ArrowUp') {
        activeIndex = Math.max(activeIndex - 1, -1);
    } else if (e.key === 'Enter' && activeIndex >= 0) {
        input.value = items[activeIndex].textContent;
        suggestions.innerHTML = '';
        return;
    }

    items.forEach((item, i) => {
        item.classList.toggle('active', i === activeIndex);
    });
});