react前端实现搜索
实现搜索功能的基本步骤
在React前端实现搜索功能，通常需要结合状态管理和事件处理。以下是核心实现方法：
创建搜索输入组件
const SearchBar = ({ onSearch }) => {
const [query, setQuery] = useState('');
const handleChange = (e) => {
setQuery(e.target.value);
onSearch(e.target.value);
};
return (
<input
type="text"
value={query}
onChange={handleChange}
placeholder="Search..."
/>
);
};实现搜索逻辑
const App = () => {
const [data, setData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
useEffect(() => {
// 获取初始数据
fetchData().then(res => {
setData(res);
setFilteredData(res);
});
}, []);
const handleSearch = (query) => {
const filtered = data.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
);
setFilteredData(filtered);
};
return (
<div>
<SearchBar onSearch={handleSearch} />
{/* 显示过滤后的结果 */}
{filteredData.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
};优化搜索性能
对于大型数据集，需要优化搜索性能：
防抖处理
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
};
// 在组件中使用
const debouncedQuery = useDebounce(query, 300);
useEffect(() => {
onSearch(debouncedQuery);
}, [debouncedQuery]);索引优化 对于复杂搜索，可以考虑预先建立搜索索引：
const buildSearchIndex = (data) => {
return data.map(item => ({
...item,
searchString: `${item.name} ${item.description}`.toLowerCase()
}));
};高级搜索功能实现
多字段搜索
const handleSearch = (query) => {
const terms = query.toLowerCase().split(' ');
const filtered = data.filter(item => {
const searchContent = `${item.name} ${item.category} ${item.tags}`.toLowerCase();
return terms.every(term => searchContent.includes(term));
});
setFilteredData(filtered);
};模糊搜索 使用Fuse.js等库实现模糊搜索：
import Fuse from 'fuse.js';
const fuseOptions = {
keys: ['name', 'description'],
threshold: 0.4
};
const fuse = new Fuse(data, fuseOptions);
const handleSearch = (query) => {
const results = fuse.search(query);
setFilteredData(results.map(r => r.item));
};搜索UI增强
搜索建议
const SearchSuggestions = ({ suggestions, onSelect }) => {
return (
<div className="suggestions">
{suggestions.map((item, i) => (
<div key={i} onClick={() => onSelect(item)}>
{item}
</div>
))}
</div>
);
};
// 在搜索组件中使用
const [suggestions, setSuggestions] = useState([]);
const handleInput = (query) => {
if (query.length > 2) {
const matches = data.filter(item =>
item.name.toLowerCase().startsWith(query.toLowerCase())
).slice(0, 5);
setSuggestions(matches);
} else {
setSuggestions([]);
}
};搜索历史
const useSearchHistory = () => {
const [history, setHistory] = useState([]);
const addToHistory = (query) => {
if (query && !history.includes(query)) {
setHistory(prev => [query, ...prev].slice(0, 5));
}
};
return { history, addToHistory };
};以上实现方法可以根据具体需求进行组合和调整，构建出适合项目的搜索功能。
