Package Exports

wwjsearchbykey
wwjsearchbykey/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (wwjsearchbykey) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

说明，数据是平级列表结构（非嵌套树形），通过 id 和 parentId 关联父子关系（而非通过 children 嵌套）。

wwjsearchbykey

一个轻量的平级树形结构数据模糊搜索工具，通过 id 和 parentId 关联父子节点，支持搜索匹配项并自动返回其所有父节点和子节点。

特性

🔍 模糊搜索：关键词大小写不敏感，支持部分匹配
🔗 自动关联：基于 id 和 parentId 自动识别父节点（祖先）和子节点（后代）
📦 平级数据兼容：直接处理平级列表数据（无需嵌套 children）
🚀 无依赖：轻量工具，任意 JS 环境均可使用

安装

# npm
npm install wwjsearchbykey

# yarn
yarn add wwjsearchbykey

# pnpm
pnpm add wwjsearchbykey

使用方法

基础使用（原生 JS / React）

import { searchByKey } from 'wwjsearchbykey';

// 平级数据格式示例（核心：通过 id 和 parentId 关联父子）
const flatData = [
  {
    id: 10000,
    parentId: null, // 根节点：parentId 为 null
    name: "test abc1",
    type: "mp3",
    size: 1024
  },
  {
    id: 10050,
    parentId: null, // 另一根节点
    name: "Test2",
    type: "mp4"
  },
  {
    id: 24300,
    parentId: 10050, // 父节点是 id=10050 的节点
    name: "Test3",
    type: "avi"
  },
  {
    id: 24301,
    parentId: 24300, // 父节点是 id=24300 的节点（Test3 的子节点）
    name: "Test3-1",
    type: "txt"
  }
];

// 搜索关键词 "Test3"，匹配属性为 "name"
const results = searchByKey('Test3', flatData, 'name');
console.log(results);
// 结果包含：
// - 匹配项：id=24300（Test3）
// - 父节点：id=10050（Test2，因为 24300 的 parentId=10050）
// - 子节点：id=24301（Test3-1，因为其 parentId=24300）

Vue 全局使用

// main.js（Vue 2）
import Vue from 'vue';
import { searchByKey } from 'wwjsearchbykey';
Vue.prototype.$searchByKey = searchByKey;

// 或 Vue 3
import { createApp } from 'vue';
import App from './App.vue';
import { searchByKey } from 'wwjsearchbykey';
const app = createApp(App);
app.config.globalProperties.$searchByKey = searchByKey;
app.mount('#app');

<!-- 组件中使用 -->
<template>
  <div>
    <input v-model="keyword" placeholder="输入关键词" />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
// Vue 2 示例
export default {
  data() {
    return {
      keyword: '',
      flatData: [/* 平级数据 */]
    };
  },
  methods: {
    handleSearch() {
      const results = this.$searchByKey(this.keyword, this.flatData, 'name');
      console.log('搜索结果：', results);
    }
  }
};
</script>

API 说明

`searchByKey(keyName, oldTableList, name)`

参数

参数名	类型	描述	必需
`keyName`	string	搜索关键词（自动忽略首尾空格和大小写）	是
`oldTableList`	Array	平级节点数组（结构要求见下方）	是
`name`	string	要匹配的属性名（如 'name'、'title'）	是

返回值

Array：过滤后的平级节点数组，包含：
- 所有匹配关键词的节点
- 匹配节点的所有父节点（从直接父到根节点）
- 匹配节点的所有子节点（从直接子到所有后代节点）

数据结构要求

oldTableList 中的每个节点必须包含以下核心属性（其他属性可自定义）：

属性名	类型	描述
`id`	any	节点唯一标识（不可重复）
`parentId`	any	父节点的 `id`（根节点为 `null`）

示例：

// 根节点（无父节点）
{ id: 1, parentId: null, name: "根节点1" }
// 子节点（父节点是 id=1 的节点）
{ id: 2, parentId: 1, name: "子节点1" }

工作原理

对关键词进行处理：去除首尾空格，转为小写（实现大小写不敏感）
遍历平级数据，找到所有 name 属性包含关键词的节点（匹配项）
基于 parentId 向上追溯，找到匹配项的所有父节点（直到根节点）
基于 id 向下查找，找到匹配项的所有子节点（所有后代）
去重后返回包含匹配项、父节点、子节点的结果数组

注意事项

若关键词为空字符串，将直接返回原始数据 oldTableList
确保 id 唯一且 parentId 正确指向父节点的 id，否则可能导致关联错误
不依赖 children 属性，无需提前构建嵌套树形结构，直接处理平级列表

示例说明

当搜索 Test3 时，基于以下平级数据：

[
  { id: 10000, parentId: null, name: "test abc1" },
  { id: 10050, parentId: null, name: "Test2" },
  { id: 24300, parentId: 10050, name: "Test3" }, // 匹配项
  { id: 24301, parentId: 24300, name: "Test3-1" } // 匹配项的子节点
]

返回结果为：

[
  { id: 10050, ... }, // Test3 的父节点
  { id: 24300, ... }, // 匹配项 Test3
  { id: 24301, ... }  // Test3 的子节点
]