搜索框实时搜索功能实现：手把手教你加个智能查找

你有没有用过那种边打字边出结果的搜索框？比如在电商网站搜商品，刚敲下‘手机’，下面立马跳出各种型号，不用点‘搜索’按钮就能看到内容。这种就是实时搜索，也叫“即时搜索”，现在很多网站和本地应用都在用。如果你正折腾自己的小项目，或者想给家里的 NAS 管理页面加点实用功能，这个技术很值得搞一搞。

实时搜索是怎么工作的？

传统搜索是填完内容，点按钮，跳页面再出结果。实时搜索不一样，用户每敲一个字，前端就立刻向后台发请求，拿到匹配数据，动态刷新列表。整个过程在后台静悄悄完成，体验顺滑很多。

核心流程就三步：
1. 监听输入框的输入事件；
2. 拿到当前输入内容，发请求给后端；
3. 把返回的结果更新到页面上。

前端怎么写？用原生 JS 就够了

别一上来就想框架，原生 JavaScript 完全能搞定。看个简单例子：

<input type="text" id="searchInput" placeholder="输入关键字...">
<ul id="resultList"></ul>

const input = document.getElementById('searchInput');
const list = document.getElementById('resultList');

// 防抖变量
let timeoutId;

input.addEventListener('input', function() {
  const keyword = this.value.trim();

  // 清除之前的延迟请求
  clearTimeout(timeoutId);

  // 输入为空时清空结果
  if (!keyword) {
    list.innerHTML = '';
    return;
  }

  // 防抖：等用户停0.3秒再发请求
  timeoutId = setTimeout(() => {
    fetch(`/api/search?keyword=${encodeURIComponent(keyword)}`)
      .then(res => res.json())
      .then(data => {
        list.innerHTML = data.map(item =>
          `<li>${item.name}</li>`)
        ).join('');
      });
  }, 300);
});

这里用了防抖（debounce），避免用户每敲一个字母就发一次请求，浪费资源。停顿300毫秒才触发查询，更合理。

后端配合很简单

后端不需要做什么复杂操作，只要提供一个能接收 keyword 参数的接口就行。比如用 Node.js + Express 写：

app.get('/api/search', (req, res) => {
  const { keyword } = req.query;
  if (!keyword) {
    return res.json([]);
  }

  // 假设数据存在数组里
  const mockData = [
    { name: '手机支架' },
    { name: '手机壳' },
    { name: '充电宝' },
    { name: 'Type-C 数据线' }
  ];

  const filtered = mockData.filter(item =>
    item.name.includes(keyword)
  );

  res.json(filtered);
});

实际项目中，这里换成数据库查询，比如 MySQL 的 LIKE 或 Elasticsearch 的模糊匹配，效果更准更快。

这些细节不能忽略

上线前注意几个坑：
- 输入特殊字符要转义，防止 XSS 攻击；
- 网络异常时要有提示，别让用户干等；
- 手机端输入法频繁触发 input 事件，防抖时间可以设成400~500毫秒更稳；
- 如果数据量大，考虑分页或懒加载，别一股脑全刷出来。

家里路由器刷了 OpenWrt，想给管理页面加个设备搜索？或者自己搭了个影视库，想找电影不想翻目录？加上这个功能，日常用起来会舒服很多。