javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js模糊搜索

轻量级JavaScript模糊搜索库Fuse.js入门教程

作者：2501_93501965

Fuse.js是一个功能强大且易于使用的模糊搜索库,它的轻量级设计和高度可配置性使其成为前端搜索的绝佳选择,本文给大家介绍轻量级JavaScript模糊搜索库Fuse.js入门教程,感兴趣的朋友跟随小编一起看看吧

前言

在前端开发中，搜索功能可以说是最常见的需求之一。无论是商品列表、用户管理还是文章检索，一个好用的搜索功能总能提升用户体验。但实现一个"聪明"的搜索并不简单——尤其是当用户输入不准确或只记得部分关键词时。

这就是模糊搜索（Fuzzy Search）发挥作用的地方！而今天要介绍的 Fuse.js 绝对是前端模糊搜索的一把利器。它轻量、高效、零依赖，是我在多个项目中的首选工具（没有之一）！

什么是Fuse.js？

Fuse.js是一个轻量级的JavaScript模糊搜索库，专为浏览器和Node.js环境设计。它能在客户端对本地数据进行强大的模糊搜索，不需要服务端支持。

几个核心特点：

为什么选择Fuse.js？

市面上有很多搜索库，为什么选Fuse.js？

基本用法

安装

首先，让我们安装Fuse.js：

# npm
npm install --save fuse.js
# yarn
yarn add fuse.js
# pnpm 
pnpm add fuse.js

也可以通过CDN直接使用：

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

简单示例

下面是一个最基础的例子，搜索一个书名列表：

// 引入Fuse
import Fuse from 'fuse.js';
// 准备数据
const books = [
  { title: '老人与海', author: '海明威' },
  { title: '百年孤独', author: '马尔克斯' },
  { title: '三体', author: '刘慈欣' },
  { title: '围城', author: '钱钟书' },
  { title: '活着', author: '余华' }
];
// 配置Fuse选项
const options = {
  keys: ['title', 'author'],  // 搜索的属性
  threshold: 0.3              // 匹配阈值，越低越精确
};
// 创建Fuse实例
const fuse = new Fuse(books, options);
// 执行搜索
const result = fuse.search('三');
console.log(result);
// 输出结果中会包含"三体"

就这么简单！！！仅需几行代码，你已经实现了一个基础的模糊搜索。当用户输入"三"时，Fuse.js会返回包含"三体"的结果。

高级配置选项

Fuse.js真正强大的地方在于它的可配置性。让我们深入了解一些重要的配置选项：

核心选项

const advancedOptions = {
  // 搜索的键（可以是嵌套属性，如'user.name'）
  keys: ['title', 'author'],
  // 匹配阈值 (0-1)，0表示完全匹配，1表示任何东西都能匹配
  threshold: 0.4,
  // 是否区分大小写
  isCaseSensitive: false,
  // 是否按精确度排序结果
  shouldSort: true,
  // 搜索结果数量限制
  limit: 5,
  // 结果中包含匹配位置信息
  includeMatches: true,
  // 结果中包含得分信息
  includeScore: true,
  // 查找所有匹配项（设为false时找到第一个匹配就停止）
  findAllMatches: false
};

键重要性权重

如果你想让某些字段在搜索中更重要，可以为每个键设置权重：

const options = {
  keys: [
    { name: 'title', weight: 0.7 },
    { name: 'author', weight: 0.3 }
  ]
};

这样设置后，标题匹配的优先级会高于作者匹配。

自定义搜索模式

Fuse.js支持多种搜索模式，满足不同场景需求：

const options = {
  // 可选值: 'exact'(精确匹配), 'forward'(前缀匹配), 'full'(完全匹配)
  matchAllTokens: false,
  tokenize: true,
  matchAllTokens: true
};

实战案例：构建智能通讯录搜索

让我们通过一个更复杂的例子来展示Fuse.js的威力 - 构建一个智能通讯录搜索功能。

// 联系人数据
const contacts = [
  { name: '张三', company: '阿里巴巴', email: 'zhangsan@ali.com', phone: '13800001111' },
  { name: '李四', company: '腾讯', email: 'lisi@tencent.com', phone: '13900002222' },
  { name: '王五', company: '百度', email: 'wangwu@baidu.com', phone: '13700003333' },
  { name: '赵六', company: '字节跳动', email: 'zhaoliu@bytedance.com', phone: '13600004444' },
  { name: '钱七', company: '华为', email: 'qianqi@huawei.com', phone: '13500005555' }
];
// 高级配置
const contactSearchOptions = {
  keys: [
    { name: 'name', weight: 0.4 },
    { name: 'company', weight: 0.2 },
    { name: 'email', weight: 0.2 },
    { name: 'phone', weight: 0.2 }
  ],
  threshold: 0.4,
  includeMatches: true,
  minMatchCharLength: 2,
  shouldSort: true,
  tokenize: true,
  matchAllTokens: false
};
const contactFuse = new Fuse(contacts, contactSearchOptions);
// 搜索"张"
const result1 = contactFuse.search('张');
console.log('搜索"张"的结果:', result1);
// 搜索"ali"
const result2 = contactFuse.search('ali');
console.log('搜索"ali"的结果:', result2);
// 搜索"138"（电话号码部分匹配）
const result3 = contactFuse.search('138');
console.log('搜索"138"的结果:', result3);

在这个例子中，无论用户输入姓名、公司、邮箱还是电话号码的一部分，都能找到相应的联系人。而且由于我们设置了权重，姓名匹配的优先级最高。

结合React构建搜索组件

如果你使用React，可以轻松集成Fuse.js创建一个强大的搜索组件：

import React, { useState, useEffect } from 'react';
import Fuse from 'fuse.js';
function SearchComponent({ items }) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [fuse, setFuse] = useState(null);
  // 初始化Fuse实例
  useEffect(() => {
    const options = {
      keys: ['name', 'description'],
      threshold: 0.3,
      includeMatches: true
    };
    setFuse(new Fuse(items, options));
  }, [items]);
  // 处理搜索
  useEffect(() => {
    if (!fuse || !query) {
      setResults(items);
      return;
    }
    const searchResults = fuse.search(query);
    setResults(searchResults.map(result => result.item));
  }, [query, fuse, items]);
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="搜索..."
      />
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}
export default SearchComponent;

这个组件可以直接接收数据数组，并提供实时搜索功能。随着用户输入，搜索结果会立即更新。

性能优化技巧

当数据量变大时，搜索性能可能会受到影响。以下是几个优化技巧：

1. 延迟搜索

对于用户输入，添加防抖（debounce）避免频繁搜索：

import { debounce } from 'lodash';
// 延迟300ms执行搜索
const delayedSearch = debounce((query) => {
  const results = fuse.search(query);
  setResults(results);
}, 300);
// 用户输入时调用
function handleInputChange(e) {
  const query = e.target.value;
  setQuery(query);
  delayedSearch(query);
}

2. 索引优化

如果你的数据集不频繁变化，可以创建并保存Fuse索引来提高性能：

// 创建索引
const myIndex = Fuse.createIndex(['title', 'author'], books);
// 使用已有索引创建Fuse实例
const fuse = new Fuse(books, options, myIndex);

3. 减少搜索键

只在真正需要搜索的字段上进行搜索，减少不必要的计算：

// 不好的做法 - 搜索所有字段
const badOptions = { keys: Object.keys(item) };
// 好的做法 - 只搜索必要字段
const goodOptions = { keys: ['title', 'tags'] };

常见问题与解决方案

1. 搜索结果不如预期

如果搜索结果不够精确，可以尝试：

2. 中文搜索不理想

对于中文搜索，可以启用分词和调整匹配长度：

const options = {
  tokenize: true,
  matchAllTokens: false,
  minMatchCharLength: 1,
  threshold: 0.2
};

3. 搜索太慢

对于大数据集，可以：

总结

Fuse.js是一个功能强大且易于使用的模糊搜索库。它的轻量级设计和高度可配置性使其成为前端搜索的绝佳选择。无论是简单的列表过滤还是复杂的多字段搜索，Fuse.js都能胜任。

通过本文介绍的基础知识和高级技巧，你应该能够在自己的项目中实现出色的搜索体验。记住，好的搜索功能可以大大提升用户体验，而Fuse.js正是帮你实现这一目标的得力助手！

无论你是开发一个简单的博客搜索还是复杂的产品目录，Fuse.js都值得一试。相信在掌握了这些知识后，你已经准备好为你的应用添加一个智能、高效的搜索功能了！

参考资源

希望这篇教程对你有所帮助！快去尝试Fuse.js，让你的应用拥有强大的搜索能力吧！

到此这篇关于轻量级JavaScript模糊搜索库Fuse.js入门教程的文章就介绍到这了,更多相关js模糊搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文