使用Fuse.js实现高效的模糊搜索功能

npm install fuse.js
# 或者
yarn add 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);

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

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

npm install fuse.js

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;

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