js实现简单的搜索框

实现基础搜索框

HTML部分创建输入框和按钮

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

添加事件监听

JavaScript部分实现搜索功能

document.getElementById('searchButton').addEventListener('click', function() {
  const searchTerm = document.getElementById('searchInput').value;
  if(searchTerm.trim() !== '') {
    // 执行搜索逻辑
    searchContent(searchTerm);
  }
});

搜索逻辑实现

创建模拟数据并实现搜索功能

const data = [
  {id: 1, title: "JavaScript教程", content: "学习JavaScript基础知识"},
  {id: 2, title: "CSS指南", content: "掌握CSS样式设计"},
  {id: 3, title: "HTML入门", content: "HTML标记语言基础"}
];

function searchContent(term) {
  const results = data.filter(item => 
    item.title.includes(term) || 
    item.content.includes(term)
  );

  displayResults(results);
}

显示搜索结果

渲染搜索结果到页面

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

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

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

  resultsContainer.appendChild(ul);
}

添加键盘支持

允许用户按Enter键触发搜索

document.getElementById('searchInput').addEventListener('keyup', function(e) {
  if(e.key === 'Enter') {
    document.getElementById('searchButton').click();
  }
});

样式优化

添加基础CSS样式

#searchInput {
  padding: 8px;
  width: 300px;
  margin-right: 10px;
}

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

#results {
  margin-top: 20px;
}

#results ul {
  list-style: none;
  padding: 0;
}

#results li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

实时搜索功能

实现输入时实时搜索（可选）

document.getElementById('searchInput').addEventListener('input', function(e) {
  const searchTerm = e.target.value;
  if(searchTerm.length > 2) {  // 至少输入3个字符才搜索
    searchContent(searchTerm);
  }
});

防抖优化

避免频繁触发搜索请求

let debounceTimer;
document.getElementById('searchInput').addEventListener('input', function(e) {
  clearTimeout(debounceTimer);
  const searchTerm = e.target.value;

  debounceTimer = setTimeout(() => {
    if(searchTerm.length > 2) {
      searchContent(searchTerm);
    }
  }, 300);  // 300毫秒延迟
});