如何用javascript实现搜索功能_如何过滤数据？-js教程-PHP中文网

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

夜晨

发布： 2025-12-15 21:49:09

原创

852人浏览过

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

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

用 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免费学习笔记（深入）”；

新快购物系统

新快购物系统是集合目前网络所有购物系统为参考而开发，不管从速度还是安全我们都努力做到最好，此版虽为免费版但是功能齐全，无任何错误，特点有：专业的、全面的电子商务解决方案，使您可以轻松实现网上销售；自助式开放性的数据平台，为您提供充满个性化的设计空间；功能全面、操作简单的远程管理系统，让您在家中也可实现正常销售管理；严谨实用的全新商品数据库，便于查询搜索您的商品。

查看详情

function filterData(list, keyword) {
  if (!keyword) return list; // 输入为空，返回全部

  return list.filter(item => {
    const text = `${item.name}${item.city}`.toLowerCase();
    return text.includes(keyword.toLowerCase());
  });
}

登录后复制

拼接多个字段再查，适合简单场景；也可分别查 name 和 city，用 || 连接
用 toLowerCase() 统一大小写，避免 “北京” 找不到 “beijing”
注意先 trim()，防止用户输空格导致匹配失败

进阶过滤：支持中文拼音首字母或分词逻辑

纯 includes 对中文友好，但搜“bj”找不到“北京”。如需拼音支持，可用轻量库 pinyin-pro（无依赖）：

// npm install pinyin-pro  
import { pinyin } from 'pinyin-pro';

function matchWithPinyin(item, keyword) {
  const namePinyin = pinyin(item.name, { toneType: 'none', type: 'array' }).join('');
  const cityPinyin = pinyin(item.city, { toneType: 'none', type: 'array' }).join('');
  const fullText = `${item.name}${item.city}${namePinyin}${cityPinyin}`.toLowerCase();
  return fullText.includes(keyword.toLowerCase());
}

登录后复制

把汉字转成无音调拼音（如“北京”→“beijing”），再合并搜索
不用强求完整分词，首字母或全拼覆盖大部分用户输入习惯
如数据量大（>1000 条），建议防抖（debounce），避免频繁过滤

渲染结果：只更新 DOM，别重复创建节点

过滤后别每次 innerHTML = '' + newHTML，容易丢失焦点或状态。推荐用 DocumentFragment 或清空后 append：

function renderList(list) {
  const container = document.getElementById('resultList');
  container.innerHTML = ''; // 清空旧内容

  list.forEach(item => {
    const div = document.createElement('div');
    div.textContent = `${item.name} — ${item.city}`;
    container.appendChild(div);
  });
}

登录后复制