如何用原生JS和HTML实现停止输入3秒后触发搜索的搜索框

实现思路 #

核心是利用**防抖（Debounce）**机制：设置一个定时器，用户每次输入时先清除之前的定时器，重新计时，只有当用户停止输入达到指定时长（这里是3秒）后，才触发搜索逻辑。

完整代码示例 #

HTML结构

<div class="search-container">
  <input type="text" id="searchInput" placeholder="输入关键词搜索..." />
  <div id="searchResult"></div>
</div>

JavaScript逻辑

// 防抖函数：接收要执行的函数和延迟时间
function debounce(func, delay) {
  let timerId;
  return function(...args) {
    // 每次输入时清除之前的定时器
    clearTimeout(timerId);
    // 重新设置定时器，延迟后执行目标函数
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 实际的搜索函数
function performSearch(query) {
  const resultElement = document.getElementById('searchResult');
  if (!query.trim()) {
    resultElement.textContent = '请输入搜索关键词';
    return;
  }
  // 这里替换成你的实际搜索逻辑，比如发起AJAX请求、处理本地数据等
  resultElement.textContent = `正在搜索：${query}...`;
  // 模拟异步搜索结果
  setTimeout(() => {
    resultElement.textContent = `"${query}" 的搜索结果展示在这里`;
  }, 500);
}

// 获取搜索输入框
const searchInput = document.getElementById('searchInput');
// 创建防抖后的搜索函数实例
const debouncedSearch = debounce(performSearch, 3000);
// 给输入框绑定防抖后的搜索事件
searchInput.addEventListener('input', function(e) {
  const query = e.target.value;
  debouncedSearch(query);
});

关键代码解释 #

• debounce函数：维护一个定时器ID，每次调用时先清除之前的定时器，确保只有最后一次输入停止后才会触发目标函数。
• performSearch：这里是实际执行搜索的逻辑，你可以根据需求替换成真实的接口请求、本地数据检索等操作。
• 输入事件绑定：监听输入框的input事件，每次输入时获取当前值，通过防抖后的函数触发搜索。

内容的提问来源于stack exchange，提问作者Nickie Ferrante