Fuse.js 模糊搜索实战：从基础配置到 React 实时联想

作者：晚风写码时间：2026-10-31 10:29:51浏览：157

本文详细介绍如何使用 Fuse.js 在 Web 应用中实现高效的模糊搜索功能。内容涵盖 Fuse.js 的安装、基础配置（如 keys、threshold）及高级用法，并深入讲解如何在 React 项目中结合 useState 和事件监听，构建支持实时联想的搜索组件，提升用户体验。

在现代 Web 应用程序开发中，提供高效的搜索能力至关重要。无论是电商网站、博客平台还是其他类型的应用，帮助用户迅速定位目标信息是提升用户体验的核心环节。Fuse.js 作为一款强大的 JavaScript 库，提供了灵活的模糊搜索与文本匹配机制，助力开发者轻松打造卓越的搜索体验。

什么是 Fuse.js？

Fuse.js 是一款轻量级的 JavaScript 库，专门用于实现模糊搜索和文本匹配。它基于近似字符串匹配算法，能够在大规模数据集中快速检索匹配项，同时支持高级搜索选项和自定义配置，满足多样化的搜索需求。

安装 Fuse.js

您可以通过 npm 或 yarn 工具安装 Fuse.js，具体命令如下：

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

基本用法示例

我们从基础示例入手，演示 Fuse.js 的基本使用流程。假设有一个包含多本书籍数据的数组，我们需要通过书名进行模糊搜索。

// 导入 Fuse.js
const Fuse = require('fuse.js');

// 示例数据 - 一个包含多个对象的数组
const books = [
  { title: 'JavaScript: The Good Parts' },
  { title: 'Eloquent JavaScript' },
  { title: 'JavaScript: The Definitive Guide' },
  { title: 'Learning JavaScript Design Patterns' },
  { title: 'You Don't Know JS' },
];

// 创建 Fuse.js 实例并配置搜索选项
const options = {
  keys: ['title'], // 搜索的键，这里只搜索 'title' 属性
};

const fuse = new Fuse(books, options);

// 执行模糊搜索
const result = fuse.search('JavaScript');

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

在示例中，首先导入 Fuse.js 库。接着，定义一个包含多个书籍对象的数组 books。随后，创建 Fuse.js 实例，配置搜索选项，指定搜索目标为 'title' 属性。最后，调用 search 方法执行模糊搜索，传入 'JavaScript' 作为搜索关键词，并输出结果。

搜索结果返回一个包含匹配书籍对象的数组，匹配精度由默认阈值控制。

高级用法示例

Fuse.js 不仅支持基础模糊搜索，还提供丰富的高级选项以应对复杂需求。以下是几个高级用法示例：

自定义搜索选项

您可以灵活配置 Fuse.js 实例的多种参数，包括匹配阈值、搜索键权重及排序规则等，以适配具体业务场景。

const options = {
  keys: ['title', 'author'], // 多个搜索键
  threshold: 0.6, // 阈值控制匹配的敏感度
  shouldSort: true, // 是否对结果进行排序
  location: 0, // 匹配的位置，0 表示开头匹配
  distance: 100, // 搜索的最大距离
  minMatchCharLength: 2, // 最小匹配字符长度
};

自定义搜索函数

此外，您还可以定义自定义搜索函数，从而更精确地控制搜索逻辑，处理特殊搜索需求。

const customSearchFunction = (pattern, options) => {
  // 自定义搜索逻辑
  // 返回匹配项的数组
};

const fuse = new Fuse(data, { customSearch: customSearchFunction });

高级示例：实时搜索

Fuse.js 可与用户界面结合实现实时搜索交互，例如在输入框中动态展示搜索结果。

// 监听输入框变化
const inputElement = document.getElementById('searchInput');
inputElement.addEventListener('input', (event) => {
  const searchTerm = event.target.value;
  
  // 执行模糊搜索
  const result = fuse.search(searchTerm);
  
  // 更新搜索结果显示
  renderSearchResults(result);
});

示例中，我们监听输入框的变化事件，每次内容变动时执行模糊搜索，并实时更新搜索结果展示。

实战应用：Fuse.js 与 React 实现实时联想功能

本实战部分探讨如何结合 Fuse.js 与 React 实现实时联想功能，以优化用户搜索体验。我们将创建一个 React 组件，包含输入框，用户在输入时实时获取相关搜索建议。

步骤 1：安装 Fuse.js 和 React

首先确保 React 项目已配置并运行，然后安装 Fuse.js 及必要依赖：

npm install fuse.js

步骤 2：创建 React 组件

创建一个 React 组件，用于接收用户输入并展示搜索建议。以下是示例组件的基本结构：

import React, { useState } from 'react';
import Fuse from 'fuse.js';

const SearchSuggestions = ({ data }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  // 创建 Fuse.js 实例并配置搜索选项
  const options = {
    keys: ['name'], // 搜索的键
    threshold: 0.4, // 阈值控制匹配的敏感度
  };

  const fuse = new Fuse(data, options);

  // 处理输入框变化
  const handleInputChange = (event) => {
    const { value } = event.target;
    setSearchTerm(value);

    // 执行模糊搜索
    const result = fuse.search(value);

    // 更新搜索建议
    setSuggestions(result);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="搜索..."
        value={searchTerm}
        onChange={handleInputChange}
      />
      <ul>
        {suggestions.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchSuggestions;

步骤 3：使用 Fuse.js 进行实时搜索

在上述代码中，我们创建了一个名为 SearchSuggestions 的 React 组件。该组件包含输入框和搜索结果列表。用户输入时，利用 Fuse.js 执行模糊搜索，并更新建议列表。

首先创建 Fuse.js 实例并配置搜索选项。然后在输入框的 onChange 事件处理程序中执行模糊搜索，将结果存储于 suggestions 状态中，并在列表中渲染这些建议。

步骤 4：在应用中使用组件

现在，您可以在 React 应用中引入 SearchSuggestions 组件，并传递数据供搜索使用。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import SearchSuggestions from './SearchSuggestions';

const data = [
  { name: 'JavaScript: The Good Parts' },
  { name: 'Eloquent JavaScript' },
  { name: 'JavaScript: The Definitive Guide' },
  { name: 'Learning JavaScript Design Patterns' },
  { name: 'You Don't Know JS' },
];

ReactDOM.render(
  <SearchSuggestions data={data} />,
  document.getElementById('root')
);

这将在应用中渲染一个具备实时联想功能的搜索输入框。