当前位置：首页 > JavaScript

实现autocomplete功能js

2026-03-15 21:01:08JavaScript

实现 Autocomplete 功能的 JavaScript 方法

基础 HTML 结构

创建一个输入框和一个用于显示建议的下拉容器：

<input type="text" id="searchInput" placeholder="Search...">
<div id="autocompleteResults"></div>

样式设计

为下拉建议框添加基本样式：

#autocompleteResults {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.autocomplete-item {
  padding: 8px;
  cursor: pointer;
}

.autocomplete-item:hover {
  background-color: #f0f0f0;
}

JavaScript 实现逻辑

数据准备 准备一个用于匹配的数据源：

const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape'];

事件监听 监听输入框的输入事件：

const input = document.getElementById('searchInput');
const resultsContainer = document.getElementById('autocompleteResults');

input.addEventListener('input', function() {
  const inputValue = this.value.toLowerCase();
  if (inputValue.length === 0) {
    resultsContainer.style.display = 'none';
    return;
  }

  const filteredData = data.filter(item => 
    item.toLowerCase().includes(inputValue)
  );

  showResults(filteredData);
});

结果显示函数 创建并显示匹配结果：

function showResults(items) {
  resultsContainer.innerHTML = '';

  if (items.length === 0) {
    resultsContainer.style.display = 'none';
    return;
  }

  items.forEach(item => {
    const div = document.createElement('div');
    div.classList.add('autocomplete-item');
    div.textContent = item;
    div.addEventListener('click', function() {
      input.value = item;
      resultsContainer.style.display = 'none';
    });
    resultsContainer.appendChild(div);
  });

  resultsContainer.style.display = 'block';
}

外部点击隐藏 点击页面其他区域时隐藏下拉框：

document.addEventListener('click', function(e) {
  if (e.target !== input) {
    resultsContainer.style.display = 'none';
  }
});

高级功能扩展

键盘导航支持 添加键盘上下箭头和回车选择支持：

input.addEventListener('keydown', function(e) {
  const items = resultsContainer.querySelectorAll('.autocomplete-item');
  let currentItem = document.querySelector('.autocomplete-item.highlight');

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    if (!currentItem) {
      items[0]?.classList.add('highlight');
    } else {
      currentItem.classList.remove('highlight');
      currentItem.nextElementSibling?.classList.add('highlight');
    }
  }

  if (e.key === 'ArrowUp') {
    e.preventDefault();
    if (currentItem) {
      currentItem.classList.remove('highlight');
      currentItem.previousElementSibling?.classList.add('highlight');
    }
  }

  if (e.key === 'Enter' && currentItem) {
    input.value = currentItem.textContent;
    resultsContainer.style.display = 'none';
  }
});

添加高亮样式

.highlight {
  background-color: #d4d4d4;
}

远程数据获取 使用fetch从API获取数据：

input.addEventListener('input', async function() {
  const inputValue = this.value.trim();
  if (inputValue.length < 2) {
    resultsContainer.style.display = 'none';
    return;
  }

  try {
    const response = await fetch(`/api/search?q=${encodeURIComponent(inputValue)}`);
    const data = await response.json();
    showResults(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});

防抖优化 减少频繁请求：

实现autocomplete功能js

let debounceTimer;

input.addEventListener('input', function() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const inputValue = this.value.trim();
    // 处理输入逻辑
  }, 300);
});

这个实现包含了自动完成功能的核心要素，可以根据具体需求进行扩展和调整。对于生产环境，建议考虑使用成熟的库如jQuery UI Autocomplete或downshift等，它们提供了更完善的功能和更好的可访问性支持。