Fuse.js：前端模糊搜索的利器

在现代 Web 应用中，模糊搜索功能已成为提升用户体验的重要组成部分。传统的 filter + includes 方法虽然简单，但在处理复杂或多字段搜索时显得力不从心。这时，Fuse.js 作为一个轻量级、零依赖的 JavaScript 模糊搜索库，提供了更强大和灵活的解决方案。([掘金][1], [博客园][2])

🔍 为什么选择 Fuse.js？

轻量级且零依赖：Fuse.js 体积小巧，无需引入其他库，适合前端项目使用。
支持多字段搜索：可对对象数组中的多个字段进行搜索，满足复杂的数据结构需求。
高性能：适用于小到中等规模的数据集，提供快速的搜索体验。
灵活的配置选项：支持设置权重、阈值、匹配位置等，满足不同的搜索需求。
适用于浏览器和 Node.js：可在前端和后端环境中使用，具有广泛的适用性。([腾讯云 - 产业智变云启未来][3], [CSDN 博客][4])

🚀 安装与引入

使用 npm 或 yarn 安装：

npm install fuse.js
# 或者
yarn add fuse.js

在浏览器中直接引入：

<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>

🛠️ 基本用法

import Fuse from 'fuse.js';

// 示例数据
const books = [
  { title: "Old Man's War", author: "John Scalzi" },
  { title: "The Lock Artist", author: "Steve Hamilton" },
  // 更多数据...
];

// 配置选项
const options = {
  keys: ['title', 'author'], // 指定搜索的字段
  threshold: 0.3,            // 匹配阈值，越低匹配越精确
};

// 创建 Fuse 实例
const fuse = new Fuse(books, options);

// 执行搜索
const result = fuse.search('john');
console.log(result);

上述代码中，threshold 控制匹配的严格程度，keys 指定需要搜索的字段。

⚙️ 高级配置

Fuse.js 提供了丰富的配置选项，以满足更复杂的搜索需求：

includeScore：在结果中包含匹配得分。
includeMatches：在结果中包含匹配的详细信息。
minMatchCharLength：设置最小匹配字符长度。
useExtendedSearch：启用扩展搜索语法，支持更复杂的查询。([博客园][5])

const options = {
  keys: ['title', 'author'],
  includeScore: true,
  includeMatches: true,
  minMatchCharLength: 2,
  useExtendedSearch: true,
};

使用扩展搜索语法，可以实现更复杂的查询，例如：

^pattern：匹配以 pattern 开头的字符串。
!pattern：排除包含 pattern 的字符串。
=pattern：精确匹配 pattern。

📚 实际应用场景

前端搜索功能：在无需后端支持的情况下，实现客户端搜索功能。
自动完成和建议：为输入框提供实时的搜索建议。
数据过滤：在表格或列表中，根据用户输入动态过滤数据。
移动端应用：在移动设备上提供快速、离线的搜索体验。([CSDN 博客][4], [博客园][5])

🧪 示例：搜索菜单功能

import Fuse from 'fuse.js';

const menuItems = [
  { name: 'Dashboard' },
  { name: 'Settings' },
  { name: 'Profile' },
  // 更多菜单项...
];

const options = {
  keys: ['name'],
  threshold: 0.2,
};

const fuse = new Fuse(menuItems, options);

// 用户输入
const query = 'dash';

// 执行搜索
const result = fuse.search(query);
console.log(result);

在上述示例中，用户输入 "dash" 后，Fuse.js 会返回与之最匹配的菜单项，如 "Dashboard"。