Fuse.js完全指南：轻量级JavaScript模糊搜索库零基础入门-优快云博客

Fuse.js完全指南：轻量级JavaScript模糊搜索库零基础入门

【免费下载链接】Fuse Lightweight fuzzy-search, in JavaScript 项目地址: https://gitcode.com/gh_mirrors/fu/Fuse

你还在为实现前端搜索功能而烦恼吗？用户输入稍有偏差就找不到结果？Fuse.js帮你解决这个痛点！作为一款轻量级的JavaScript模糊搜索库，Fuse.js可以在客户端实现智能搜索，即使输入有误也能找到匹配结果。本文将带你从安装到实战，快速掌握Fuse.js的使用方法，让你的应用拥有专业级搜索体验。

读完本文你将学到：

如何快速安装和引入Fuse.js
基础搜索功能的实现方法
高级搜索技巧：权重设置、嵌套搜索和扩展搜索
实际应用场景和最佳实践

什么是Fuse.js

Fuse.js是一个轻量级的JavaScript模糊搜索库，零依赖，专为前端环境设计。模糊搜索（Fuzzy Search）允许用户在输入有误（如拼写错误、少输字符）的情况下仍能找到相关结果，极大提升了搜索体验。

官方定义：Fuse.js is a lightweight fuzzy-search, in JavaScript, with zero dependencies. README.md

Fuse.js支持所有ES5兼容的浏览器（不支持IE8及以下版本），可以轻松集成到各种Web应用、移动端应用和Electron桌面应用中。

快速开始

安装Fuse.js

Fuse.js提供多种安装方式，可根据项目需求选择：

使用npm安装

npm install fuse.js

使用Yarn安装

yarn add fuse.js

直接通过CDN引入（适合快速原型开发）

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

详细安装说明请参考官方文档：docs/getting-started/installation.md

引入Fuse.js

根据项目模块化方案不同，引入方式也有所区别：

ES6模块语法

import Fuse from 'fuse.js'

CommonJS语法

const Fuse = require('fuse.js')

原生ES模块（浏览器）

<script type="module">
  import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs'
</script>

基础使用示例

搜索字符串数组

最基础的用法是搜索一个字符串数组：

// 要搜索的数据
const books = ["Old Man's War", "The Lock Artist", "Right Ho Jeeves"];

// 配置选项
const options = {
  includeScore: true  // 包含匹配分数
};

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

// 执行搜索
const result = fuse.search('od man');

// 输出结果
console.log(result);

搜索结果将返回匹配的项及其分数：

[
  {
    "item": "Old Man's War",
    "refIndex": 0,
    "score": 0.35
  }
]

搜索对象数组

实际项目中，我们通常需要搜索对象数组，例如包含多个字段的书籍信息：

// 要搜索的对象数组
const books = [
  {
    "title": "Old Man's War",
    "author": "John Scalzi",
    "tags": ["fiction"]
  },
  {
    "title": "The Lock Artist",
    "author": "Steve",
    "tags": ["thriller"]
  }
];

// 配置选项 - 指定要搜索的字段
const options = {
  includeScore: true,
  keys: ['author', 'tags']  // 搜索author和tags字段
};

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

// 执行搜索
const result = fuse.search('tion');

高级搜索功能

嵌套搜索

Fuse.js支持搜索嵌套对象，可通过点表示法或数组表示法指定路径：

点表示法

const options = {
  includeScore: true,
  keys: ['author.tags.value']  // 嵌套路径
};

数组表示法

const options = {
  includeScore: true,
  keys: [['author', 'tags', 'value']]  // 数组形式的嵌套路径
};

自定义get函数 对于更复杂的取值逻辑，可以定义get函数：

const options = {
  includeScore: true,
  keys: [
    { name: 'title', getFn: (book) => book.title },
    { name: 'authorName', getFn: (book) => book.author.name }
  ]
};

权重设置

通过为不同字段设置权重，可以控制搜索结果的优先级：

const options = {
  includeScore: true,
  keys: [
    { name: 'title', weight: 0.3 },  // 标题权重0.3
    { name: 'author', weight: 0.7 }   // 作者权重0.7（更高优先级）
  ]
};

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

// 搜索结果将更倾向于匹配作者字段
const result = fuse.search('Man');

当未指定权重时，默认值为1。Fuse.js会自动归一化权重，确保总和为1。

扩展搜索

Fuse.js提供了强大的扩展搜索功能，支持多种匹配模式，通过特殊符号标识：

符号	匹配类型	描述
`jscript`	模糊匹配	模糊匹配"jscript"
`=scheme`	精确匹配	精确匹配"scheme"
`'python`	包含匹配	包含"python"
`!ruby`	排除匹配	不包含"ruby"
`^java`	前缀匹配	以"java"开头
`!^earlang`	排除前缀	不以"earlang"开头
`.js$`	后缀匹配	以".js"结尾
`!.go$`	排除后缀	不以".go"结尾

使用示例：

const options = {
  includeScore: true,
  useExtendedSearch: true,  // 启用扩展搜索
  keys: ['title']
};

const fuse = new Fuse(books, options);

// 搜索包含"Man"和"Old"，或者以"Artist"结尾的标题
const result = fuse.search("'Man 'Old | Artist$");

实际应用场景

实时搜索实现

Fuse.js非常适合实现实时搜索功能，结合输入事件监听：

<input type="text" id="search-input" placeholder="搜索书籍...">
<ul id="results"></ul>

<script>
  const input = document.getElementById('search-input');
  const resultsElement = document.getElementById('results');
  
  // 初始化Fuse实例
  const fuse = new Fuse(books, { keys: ['title', 'author'] });
  
  // 监听输入事件
  input.addEventListener('input', (e) => {
    const searchTerm = e.target.value;
    if (searchTerm.length < 2) {  // 输入至少2个字符才搜索
      resultsElement.innerHTML = '';
      return;
    }
    
    // 执行搜索
    const results = fuse.search(searchTerm);
    
    // 显示结果
    resultsElement.innerHTML = results.map(result => 
      `<li>${result.item.title} by ${result.item.author}</li>`
    ).join('');
  });
</script>

性能优化

对于大型数据集，Fuse.js提供了索引功能来提高搜索性能：

// 创建索引
const fuse = new Fuse(books, options);
const index = fuse.createIndex(options.keys, books);

// 保存索引（可存储在localStorage或数据库中）
localStorage.setItem('bookIndex', JSON.stringify(index.toJSON()));

// 后续使用时加载索引
const savedIndex = JSON.parse(localStorage.getItem('bookIndex'));
const fuse = new Fuse(books, options, Fuse.parseIndex(savedIndex));

总结与进阶

通过本文，你已经掌握了Fuse.js的基本用法和高级特性。Fuse.js的核心优势在于简单易用、轻量级且功能强大，非常适合前端实现智能搜索功能。

要深入学习Fuse.js，可以参考以下资源：

官方API文档：docs/api/
配置选项详解：docs/api/options.md
查询方法指南：docs/api/query.md

Fuse.js的源代码组织清晰，核心逻辑位于src/core/目录，包括评分计算src/core/computeScore.js和查询解析src/core/queryParser.js等模块。

现在，你已经准备好在项目中集成Fuse.js，为用户提供出色的搜索体验了！如果觉得本文对你有帮助，请点赞收藏，关注获取更多前端实用技巧。

【免费下载链接】Fuse Lightweight fuzzy-search, in JavaScript 项目地址: https://gitcode.com/gh_mirrors/fu/Fuse

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考