当前位置：首页 > JavaScript

js实现搜索功能

2026-04-03 18:27:08JavaScript

js实现搜索功能

实现搜索功能的基本思路

在JavaScript中实现搜索功能通常涉及监听用户输入、过滤数据并动态更新显示结果。以下是几种常见实现方式：

基于数组的简单搜索

const data = ['苹果', '香蕉', '橙子', '葡萄'];
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results');

searchInput.addEventListener('input', (e) => {
  const searchTerm = e.target.value.toLowerCase();
  const filteredResults = data.filter(item => 
    item.toLowerCase().includes(searchTerm)
  );
  resultsContainer.innerHTML = filteredResults.join('<br>');
});

对象数组的搜索

const products = [
  { id: 1, name: '笔记本电脑', category: '电子产品' },
  { id: 2, name: '智能手机', category: '电子产品' },
  { id: 3, name: '咖啡机', category: '家电' }
];

searchInput.addEventListener('input', (e) => {
  const term = e.target.value.toLowerCase();
  const filtered = products.filter(product => 
    product.name.toLowerCase().includes(term) || 
    product.category.toLowerCase().includes(term)
  );
  displayResults(filtered);
});

使用正则表达式实现高级搜索

function searchWithRegex(data, pattern) {
  const regex = new RegExp(pattern, 'i');
  return data.filter(item => regex.test(item.name));
}

实现搜索建议/自动完成

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

searchInput.addEventListener('input', debounce(() => {
  const term = searchInput.value.trim();
  if(term.length > 0) {
    fetch(`/api/suggest?q=${term}`)
      .then(res => res.json())
      .then(data => showSuggestions(data));
  }
}, 300));

function showSuggestions(items) {
  suggestions.innerHTML = items.map(item => 
    `<div class="suggestion">${item}</div>`
  ).join('');
}

使用Web Workers处理大数据量搜索

// 主线程
const worker = new Worker('search-worker.js');
worker.onmessage = (e) => {
  displayResults(e.data);
};

searchInput.addEventListener('input', (e) => {
  worker.postMessage({
    data: largeDataset,
    term: e.target.value
  });
});

// search-worker.js
self.onmessage = (e) => {
  const { data, term } = e.data;
  const results = data.filter(item => 
    item.name.includes(term)
  );
  self.postMessage(results);
};

实现模糊搜索

function fuzzySearch(items, term) {
  const searchTerm = term.toLowerCase();
  return items.filter(item => {
    const itemStr = Object.values(item).join(' ').toLowerCase();
    return itemStr.includes(searchTerm);
  });
}