js实现搜索功能
实现搜索功能的基本方法
在JavaScript中实现搜索功能通常涉及监听用户输入、过滤数据并动态显示结果。以下是几种常见实现方式：
基于数组过滤的搜索
const data = ['apple', 'banana', 'cherry', 'date'];
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results');
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filteredData = data.filter(item =>
item.toLowerCase().includes(searchTerm)
);
resultsContainer.innerHTML = filteredData.join('<br>');
});对象数组的搜索
const products = [
{ id: 1, name: 'Laptop', category: 'Electronics' },
{ id: 2, name: 'Shirt', category: 'Clothing' }
];
searchInput.addEventListener('input', (e) => {
const term = e.target.value.toLowerCase();
const results = products.filter(product =>
product.name.toLowerCase().includes(term) ||
product.category.toLowerCase().includes(term)
);
renderResults(results);
});实现模糊搜索
对于更灵活的搜索，可以添加模糊匹配：
function fuzzySearch(text, search) {
const searchChars = search.toLowerCase().split('');
const textChars = text.toLowerCase().split('');
let searchIndex = 0;
for (let char of textChars) {
if (char === searchChars[searchIndex]) {
searchIndex++;
if (searchIndex === searchChars.length) return true;
}
}
return false;
}搜索性能优化
对于大型数据集，考虑以下优化方案：
防抖处理
function debounce(func, delay) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, arguments), delay);
};
}
searchInput.addEventListener('input', debounce(function(e) {
// 搜索逻辑
}, 300));索引优化
// 预先构建搜索索引
const searchIndex = data.map(item => ({
original: item,
searchable: item.name.toLowerCase() + ' ' + item.category.toLowerCase()
}));结合API的远程搜索
当需要从服务器获取搜索结果时：
async function fetchSearchResults(query) {
try {
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
return await response.json();
} catch (error) {
console.error('搜索失败:', error);
return [];
}
}
searchInput.addEventListener('input', debounce(async (e) => {
const results = await fetchSearchResults(e.target.value);
renderResults(results);
}, 500));前端框架实现示例（React）
在React中实现搜索组件：
function SearchComponent() {
const [searchTerm, setSearchTerm] = useState('');
const [results, setResults] = useState([]);
useEffect(() => {
const filtered = data.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
setResults(filtered);
}, [searchTerm]);
return (
<div>
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<ul>
{results.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}搜索功能增强技巧
高亮匹配文本
function highlightMatch(text, searchTerm) {
const regex = new RegExp(`(${searchTerm})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}多字段加权搜索
function advancedSearch(items, term) {
return items.map(item => {
let score = 0;
if (item.name.includes(term)) score += 2;
if (item.description.includes(term)) score += 1;
return { ...item, score };
})
.filter(item => item.score > 0)
.sort((a, b) => b.score - a.score);
}这些方法可以根据具体需求组合使用，构建出适合不同场景的搜索功能实现方案。
