js实现search
实现搜索功能的方法
在JavaScript中实现搜索功能可以通过多种方式完成，具体取决于搜索的数据来源（本地数据或远程API）以及交互方式（实时搜索或按钮触发）。
基于本地数组的搜索
使用数组的filter方法对本地数据进行筛选，适用于小型数据集。
const data = ['apple', 'banana', 'cherry', 'date'];
const searchTerm = 'a';
const results = data.filter(item => item.includes(searchTerm));
console.log(results); // ['apple', 'banana', 'date']实时搜索输入框
为输入框添加事件监听器，在用户输入时实时显示搜索结果。
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results');
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filteredResults = data.filter(item =>
item.toLowerCase().includes(searchTerm)
);
resultsContainer.innerHTML = filteredResults
.map(item => `<div>${item}</div>`)
.join('');
});模糊搜索实现
使用正则表达式实现更灵活的模糊匹配，允许字符间存在间隔。
function fuzzySearch(text, query) {
const pattern = query.split('').map(char =>
`(?=.*${char})`).join('');
const regex = new RegExp(pattern, 'i');
return regex.test(text);
}
const matches = data.filter(item => fuzzySearch(item, 'ane'));
// 可能匹配 'banana' 等包含a,n,e字符的项从API获取搜索结果
使用fetch或axios从远程API获取搜索结果，适合大型数据集。
async function searchAPI(query) {
try {
const response = await fetch(`/api/search?q=${query}`);
const results = await response.json();
return results;
} catch (error) {
console.error('Search failed:', error);
return [];
}
}
document.getElementById('search-btn').addEventListener('click', async () => {
const query = document.getElementById('search-input').value;
const results = await searchAPI(query);
displayResults(results);
});优化搜索性能
对于大型数据集或频繁搜索操作，可以考虑以下优化措施：
- 使用防抖技术限制搜索触发频率
- 对数据进行预处理建立索引
- 实现分页加载避免一次性渲染大量结果
- 使用Web Worker将搜索移到后台线程
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
const debouncedSearch = debounce(searchAPI, 300);
searchInput.addEventListener('input', (e) => debouncedSearch(e.target.value));高级搜索功能实现
可以扩展基础搜索功能，添加以下特性：
- 多关键词搜索（使用空格分隔）
- 布尔运算符支持（AND/OR/NOT）
- 按相关性排序结果
- 高亮显示匹配文本
- 搜索建议/自动完成
function highlightMatch(text, query) {
const regex = new RegExp(`(${query})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}这些方法可以根据具体需求组合使用，构建从简单到复杂的不同搜索功能实现方案。
