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适合需要高级模糊匹配的场景，而自定义实现则更适合简单需求。
