如何用javascript实现搜索功能_如何过滤数据？

JavaScript搜索功能核心是监听input事件实时获取关键词，遍历数据并模糊匹配字段（支持大小写、空格、中文），可扩展拼音匹配与防抖优化，渲染时避免重复创建节点。

用 JavaScript 实现搜索功能，核心就是“监听输入 → 拿到关键词 → 遍历数据 → 筛出匹配项”。过滤本身不难，关键是写得清晰、可维护，还能应对常见需求（比如大小写、空格、中文）。

监听输入并实时获取关键词

一般绑定 input 事件（不是 keyup），因为它能捕获所有输入变化（包括粘贴、删除、语音输入等）：

const input = document.getElementById('searchInput');
const data = [
  { name: '张三', city: '北京' },
  { name: '李四', city: '上海' },
  { name: '王五', city: '广州' }
];

input.addEventListener('input', function() {
  const keyword = this.value.trim();
  const filtered = filterData(data, keyword);
  renderList(filtered); // 把结果展示出来
});

登录后复制

基础过滤：用 includes 或 indexOf 匹配字符串

对每个字段做模糊匹配，推荐用 includes()（更直观）或 toLowerCase().includes()（忽略大小写）：

立即学习“Java免费学习笔记（深入）”；

标签： javascript word java html npm app ai 上海 red