当前位置：首页 > JavaScript

js实现搜索联想

2026-03-15 15:34:35JavaScript

实现搜索联想功能

搜索联想功能通常指用户在输入框中输入内容时，系统自动提供相关的搜索建议。以下是一种常见的实现方式：

监听输入事件

使用input事件监听用户输入，触发联想逻辑：

const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', handleInput);

获取联想数据

从服务器获取联想数据，可以使用fetch或axios：

js实现搜索联想

async function fetchSuggestions(query) {
  try {
    const response = await fetch(`/api/suggestions?q=${encodeURIComponent(query)}`);
    return await response.json();
  } catch (error) {
    console.error('Error fetching suggestions:', error);
    return [];
  }
}

显示联想结果

创建DOM元素显示联想结果：

function showSuggestions(suggestions) {
  const suggestionsContainer = document.getElementById('suggestions-container');
  suggestionsContainer.innerHTML = '';

  suggestions.forEach(suggestion => {
    const suggestionElement = document.createElement('div');
    suggestionElement.textContent = suggestion;
    suggestionsContainer.appendChild(suggestionElement);
  });
}

优化性能

使用防抖技术减少请求频率：

js实现搜索联想

let debounceTimer;
function handleInput(event) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(async () => {
    const query = event.target.value.trim();
    if (query.length > 0) {
      const suggestions = await fetchSuggestions(query);
      showSuggestions(suggestions);
    }
  }, 300);
}

处理用户选择

添加点击事件处理用户选择联想项：

document.getElementById('suggestions-container').addEventListener('click', (event) => {
  if (event.target.tagName === 'DIV') {
    searchInput.value = event.target.textContent;
    document.getElementById('suggestions-container').innerHTML = '';
  }
});

前端缓存优化

可以添加本地缓存减少重复请求：

const suggestionCache = new Map();

async function fetchSuggestions(query) {
  if (suggestionCache.has(query)) {
    return suggestionCache.get(query);
  }

  try {
    const response = await fetch(`/api/suggestions?q=${encodeURIComponent(query)}`);
    const data = await response.json();
    suggestionCache.set(query, data);
    return data;
  } catch (error) {
    console.error('Error fetching suggestions:', error);
    return [];
  }
}

样式处理

为联想框添加基本样式：

#suggestions-container {
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}

#suggestions-container div {
  padding: 8px;
  cursor: pointer;
}

#suggestions-container div:hover {
  background-color: #f5f5f5;
}