当前位置：首页 > JavaScript

js实现全局搜索

2026-02-03 00:57:19JavaScript

实现全局搜索的基本思路

全局搜索功能通常涉及遍历页面内容或数据集，匹配用户输入的关键词并高亮显示结果。以下是基于JavaScript的实现方法。

监听搜索输入事件

通过事件监听获取用户输入的搜索词，触发搜索逻辑。使用input事件实现实时搜索。

const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', (e) => {
  const searchTerm = e.target.value.trim();
  performSearch(searchTerm);
});

遍历并匹配内容

遍历目标DOM元素或数据集合，检查是否包含搜索词。使用正则表达式实现不区分大小写的匹配。

function performSearch(term) {
  const elements = document.querySelectorAll('.searchable');
  const regex = new RegExp(term, 'gi');

  elements.forEach(element => {
    const text = element.textContent;
    const hasMatch = regex.test(text);
    element.classList.toggle('highlight', hasMatch);
  });
}

高亮显示匹配结果

通过CSS类控制高亮样式，动态添加或移除类名。

.highlight {
  background-color: yellow;
  font-weight: bold;
}

处理动态加载内容

对于异步加载的内容，需在数据渲染后重新执行搜索逻辑。

function loadDynamicContent() {
  fetch('/api/data').then(res => res.json()).then(data => {
    renderContent(data);
    performSearch(lastSearchTerm); // 重新应用当前搜索词
  });
}

优化搜索性能

对于大型数据集，采用防抖技术减少频繁搜索带来的性能问题。

let debounceTimer;
searchInput.addEventListener('input', (e) => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    performSearch(e.target.value.trim());
  }, 300);
});

跨页面全局搜索实现

若需实现跨页面搜索，需结合本地存储或服务端保存搜索状态。

// 保存搜索状态
function setSearchState(term) {
  localStorage.setItem('globalSearchTerm', term);
}

// 页面加载时恢复搜索
window.addEventListener('load', () => {
  const savedTerm = localStorage.getItem('globalSearchTerm');
  if (savedTerm) {
    searchInput.value = savedTerm;
    performSearch(savedTerm);
  }
});

js实现全局搜索