当前位置：首页 > JavaScript

js实现搜索框

2026-02-03 03:29:18JavaScript

实现基础搜索框功能

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

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

添加基本的事件监听和搜索逻辑：

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

function performSearch(term) {
  // 模拟搜索数据
  const data = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];
  const results = data.filter(item => item.includes(term));

  displayResults(results);
}

function displayResults(results) {
  const resultsContainer = document.getElementById('searchResults');
  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.textContent = item;
    ul.appendChild(li);
  });

  resultsContainer.appendChild(ul);
}

添加实时搜索功能

实现输入时实时触发搜索的功能：

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

添加防抖优化

防止频繁触发搜索请求：

let debounceTimer;

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

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

实现搜索历史功能

添加搜索历史记录功能：

let searchHistory = [];

function addToHistory(term) {
  if (!searchHistory.includes(term)) {
    searchHistory.unshift(term);
    if (searchHistory.length > 5) {
      searchHistory.pop();
    }
    renderHistory();
  }
}

function renderHistory() {
  const historyContainer = document.getElementById('searchHistory');
  if (!historyContainer) return;

  historyContainer.innerHTML = '';
  const ul = document.createElement('ul');

  searchHistory.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    li.addEventListener('click', () => {
      document.getElementById('searchInput').value = item;
      performSearch(item);
    });
    ul.appendChild(li);
  });

  historyContainer.appendChild(ul);
}

添加样式美化

为搜索框添加基本CSS样式：

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

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

#searchResults {
  margin-top: 20px;
}

#searchHistory {
  margin-top: 10px;
  color: #666;
}

完整示例代码

整合所有功能的完整实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    #searchInput {
      padding: 8px 12px;
      width: 300px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    #searchButton {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #searchResults {
      margin-top: 20px;
    }
    #searchHistory {
      margin-top: 10px;
      color: #666;
    }
  </style>
</head>
<body>
  <input type="text" id="searchInput" placeholder="输入搜索内容">
  <button id="searchButton">搜索</button>
  <div id="searchHistory"></div>
  <div id="searchResults"></div>

  <script>
    let searchHistory = [];
    let debounceTimer;

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

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

      debounceTimer = setTimeout(() => {
        if (searchTerm.length >= 2) {
          performSearch(searchTerm);
        }
      }, 300);
    });

    function performSearch(term) {
      const data = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];
      const results = data.filter(item => item.includes(term));
      displayResults(results);
    }

    function displayResults(results) {
      const resultsContainer = document.getElementById('searchResults');
      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.textContent = item;
        ul.appendChild(li);
      });

      resultsContainer.appendChild(ul);
    }

    function addToHistory(term) {
      if (!searchHistory.includes(term)) {
        searchHistory.unshift(term);
        if (searchHistory.length > 5) {
          searchHistory.pop();
        }
        renderHistory();
      }
    }

    function renderHistory() {
      const historyContainer = document.getElementById('searchHistory');
      if (!historyContainer) return;

      historyContainer.innerHTML = '';
      const ul = document.createElement('ul');

      searchHistory.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        li.addEventListener('click', () => {
          document.getElementById('searchInput').value = item;
          performSearch(item);
        });
        ul.appendChild(li);
      });

      historyContainer.appendChild(ul);
    }
  </script>
</body>
</html>

js实现搜索框