# 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';
// 準(zhǔn)備數(shù)據(jù)
const books = [
  { title: '老人與海', author: '海明威' },
  { title: '百年孤獨(dú)', author: '馬爾克斯' },
  { title: '三體', author: '劉慈欣' },
  { title: '圍城', author: '錢(qián)鐘書(shū)' },
  { title: '活著', author: '余華' }
];
// 配置Fuse選項(xiàng)
const options = {
  keys: ['title', 'author'],  // 搜索的屬性
  threshold: 0.3              // 匹配閾值，越低越精確
};
// 創(chuàng)建Fuse實(shí)例
const fuse = new Fuse(books, options);
// 執(zhí)行搜索
const result = fuse.search('三');
console.log(result);
// 輸出結(jié)果中會(huì)包含"三體"

const advancedOptions = {
  // 搜索的鍵（可以是嵌套屬性，如'user.name'）
  keys: ['title', 'author'],
  // 匹配閾值 (0-1)，0表示完全匹配，1表示任何東西都能匹配
  threshold: 0.4,
  // 是否區(qū)分大小寫(xiě)
  isCaseSensitive: false,
  // 是否按精確度排序結(jié)果
  shouldSort: true,
  // 搜索結(jié)果數(shù)量限制
  limit: 5,
  // 結(jié)果中包含匹配位置信息
  includeMatches: true,
  // 結(jié)果中包含得分信息
  includeScore: true,
  // 查找所有匹配項(xiàng)（設(shè)為false時(shí)找到第一個(gè)匹配就停止）
  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
};

// 聯(lián)系人數(shù)據(jù)
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: '字節(jié)跳動(dòng)', email: 'zhaoliu@bytedance.com', phone: '13600004444' },
  { name: '錢(qián)七', company: '華為', email: 'qianqi@huawei.com', phone: '13500005555' }
];
// 高級(jí)配置
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('搜索"張"的結(jié)果:', result1);
// 搜索"ali"
const result2 = contactFuse.search('ali');
console.log('搜索"ali"的結(jié)果:', result2);
// 搜索"138"（電話(huà)號(hào)碼部分匹配）
const result3 = contactFuse.search('138');
console.log('搜索"138"的結(jié)果:', 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實(shí)例
  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執(zhí)行搜索
const delayedSearch = debounce((query) => {
  const results = fuse.search(query);
  setResults(results);
}, 300);
// 用戶(hù)輸入時(shí)調(diào)用
function handleInputChange(e) {
  const query = e.target.value;
  setQuery(query);
  delayedSearch(query);
}

// 創(chuàng)建索引
const myIndex = Fuse.createIndex(['title', 'author'], books);
// 使用已有索引創(chuàng)建Fuse實(shí)例
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
};