react实现模糊搜索

实现模糊搜索的方法

在React中实现模糊搜索可以通过多种方式完成，常见的方法是使用第三方库如fuse.js或自定义搜索逻辑。以下是几种常见的方法：

使用fuse.js实现模糊搜索

fuse.js是一个轻量级的模糊搜索库，支持模糊匹配、权重设置等高级功能。

安装fuse.js：

npm install fuse.js

示例代码：

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

const data = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Banana', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
];

function FuzzySearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState(data);

  const fuse = new Fuse(data, {
    keys: ['name', 'category'],
    includeScore: true,
    threshold: 0.4,
  });

  const handleSearch = (term) => {
    setSearchTerm(term);
    if (!term) {
      setResults(data);
      return;
    }
    const searchResults = fuse.search(term);
    setResults(searchResults.map(result => result.item));
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item.name} - {item.category}</li>
        ))}
      </ul>
    </div>
  );
}

export default FuzzySearch;

自定义模糊搜索实现

如果不希望使用第三方库，可以通过简单的字符串匹配实现基本模糊搜索：

import React, { useState } from 'react';

const data = ['Apple', 'Banana', 'Carrot', 'Avocado'];

function CustomFuzzySearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState(data);

  const handleSearch = (term) => {
    setSearchTerm(term);
    if (!term) {
      setResults(data);
      return;
    }
    const filtered = data.filter(item =>
      item.toLowerCase().includes(term.toLowerCase())
    );
    setResults(filtered);
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default CustomFuzzySearch;

使用正则表达式实现高级匹配

对于更复杂的模糊匹配需求，可以使用正则表达式：

const handleSearch = (term) => {
  setSearchTerm(term);
  if (!term) {
    setResults(data);
    return;
  }
  const pattern = term.split('').map(char => `(?=.*${char})`).join('');
  const regex = new RegExp(pattern, 'i');
  const filtered = data.filter(item => regex.test(item));
  setResults(filtered);
};

性能优化建议

对于大型数据集，建议对搜索逻辑进行防抖处理，避免频繁触发搜索：

import { debounce } from 'lodash';

const debouncedSearch = debounce(handleSearch, 300);

<input
  type="text"
  onChange={(e) => debouncedSearch(e.target.value)}
/>

样式和用户体验

添加加载状态和空结果提示可以提升用户体验：

{results.length === 0 && <p>No results found</p>}

以上方法可以根据具体需求选择或组合使用，fuse.js适合需要高级模糊匹配的场景，而自定义实现则更适合简单需求。