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

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

<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);
// 输出结果中会包含"三体"

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 }
  ]
};

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

// 联系人数据
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);

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;

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);
}

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

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

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