js实现简单的搜索框

实现基础搜索框功能

创建一个基础的HTML结构，包含输入框和搜索按钮：

<input type="text" id="searchInput" placeholder="输入搜索内容">
<button id="searchButton">搜索</button>
<div id="searchResults"></div>

添加基本CSS样式：

#searchInput {
  padding: 8px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#searchButton {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

实现搜索逻辑

监听按钮点击事件并处理搜索：

document.getElementById('searchButton').addEventListener('click', function() {
  const searchTerm = document.getElementById('searchInput').value.trim();
  if (searchTerm) {
    performSearch(searchTerm);
  }
});

实现搜索函数：

function performSearch(term) {
  // 这里可以替换为实际的数据源或API调用
  const mockData = [
    { id: 1, title: 'JavaScript基础教程', content: '介绍JavaScript基本语法' },
    { id: 2, title: 'CSS高级技巧', content: '讲解CSS3高级特性' },
    { id: 3, title: 'HTML5新特性', content: '介绍HTML5新增元素和API' }
  ];

  const results = mockData.filter(item => 
    item.title.includes(term) || item.content.includes(term)
  );

  displayResults(results);
}

显示搜索结果

创建结果显示函数：

function displayResults(results) {
  const resultsContainer = document.getElementById('searchResults');
  resultsContainer.innerHTML = '';

  if (results.length === 0) {
    resultsContainer.innerHTML = '<p>未找到匹配结果</p>';
    return;
  }

  const list = document.createElement('ul');
  results.forEach(item => {
    const li = document.createElement('li');
    li.innerHTML = `<h3>${item.title}</h3><p>${item.content}</p>`;
    list.appendChild(li);
  });

  resultsContainer.appendChild(list);
}

添加键盘支持

监听回车键触发搜索：

document.getElementById('searchInput').addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    const searchTerm = document.getElementById('searchInput').value.trim();
    if (searchTerm) {
      performSearch(searchTerm);
    }
  }
});

实现实时搜索

添加输入时的实时搜索功能：

let searchTimeout;
document.getElementById('searchInput').addEventListener('input', function() {
  clearTimeout(searchTimeout);
  const term = this.value.trim();

  searchTimeout = setTimeout(() => {
    if (term) {
      performSearch(term);
    } else {
      document.getElementById('searchResults').innerHTML = '';
    }
  }, 300);
});

优化搜索性能

对于大数据集使用更高效的搜索方法：

function performSearchOptimized(term) {
  // 构建搜索索引
  const searchIndex = mockData.map(item => ({
    id: item.id,
    text: `${item.title} ${item.content}`.toLowerCase()
  }));

  const termLower = term.toLowerCase();
  const results = searchIndex
    .filter(item => item.text.includes(termLower))
    .map(item => mockData.find(data => data.id === item.id));

  displayResults(results);
}

添加搜索高亮

在结果中高亮显示匹配文本：

function highlightText(text, term) {
  const regex = new RegExp(`(${term})`, 'gi');
  return text.replace(regex, '<span class="highlight">$1</span>');
}

// 在displayResults函数中使用：
li.innerHTML = `<h3>${highlightText(item.title, term)}</h3>
               <p>${highlightText(item.content, term)}</p>`;

添加高亮样式：

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