利用js实现
使用 JavaScript 实现搜索功能
在 JavaScript 中实现搜索功能可以通过多种方式完成，以下是几种常见的方法：
监听输入事件并过滤数据
const searchInput = document.getElementById('search-input');
const items = document.querySelectorAll('.item');
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
items.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(searchTerm)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
});使用数组的 filter 方法
const data = ['Apple', 'Banana', 'Orange'];
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results');
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filtered = data.filter(item =>
item.toLowerCase().includes(searchTerm)
);
resultsContainer.innerHTML = filtered
.map(item => `<div>${item}</div>`)
.join('');
});实现模糊搜索
function fuzzySearch(text, searchTerm) {
const pattern = searchTerm.split('').map(char =>
`(?=.*${char})`
).join('');
const regex = new RegExp(pattern, 'i');
return regex.test(text);
}
const matches = data.filter(item =>
fuzzySearch(item, searchTerm)
);使用 Web Workers 处理大数据量
// main.js
const worker = new Worker('search-worker.js');
searchInput.addEventListener('input', (e) => {
worker.postMessage({
data: largeDataSet,
term: e.target.value
});
});
worker.onmessage = (e) => {
displayResults(e.data);
};
// search-worker.js
self.onmessage = (e) => {
const { data, term } = e.data;
const results = data.filter(item =>
item.includes(term)
);
self.postMessage(results);
};性能优化建议
使用防抖函数减少频繁搜索
function debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
const search = debounce((e) => {
// 搜索逻辑
});
searchInput.addEventListener('input', search);缓存搜索结果
const searchCache = {};
function searchWithCache(term) {
if (searchCache[term]) {
return searchCache[term];
}
const results = performSearch(term);
searchCache[term] = results;
return results;
}实现高级搜索功能
多条件搜索
function advancedSearch(items, filters) {
return items.filter(item => {
return Object.entries(filters).every(([key, value]) => {
if (!value) return true;
return item[key].toString().toLowerCase()
.includes(value.toLowerCase());
});
});
}高亮显示匹配文本
function highlightText(text, searchTerm) {
const regex = new RegExp(`(${searchTerm})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}这些方法可以根据具体需求进行组合和调整，适用于不同规模的应用程序和数据集。
