js 实现搜索
实现 JavaScript 搜索功能
基于数组的简单搜索
使用 Array.filter() 或 Array.includes() 方法对本地数据进行搜索。
const data = ['apple', 'banana', 'cherry'];
const searchTerm = 'app';
const results = data.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
console.log(results); // ['apple']DOM 元素搜索
通过遍历 DOM 元素实现页面内容搜索。
function searchDOM(searchText) {
const elements = document.querySelectorAll('.searchable');
elements.forEach(el => {
const text = el.textContent.toLowerCase();
el.style.display = text.includes(searchText.toLowerCase())
? 'block'
: 'none';
});
}使用正则表达式
实现更灵活的匹配模式。
const regex = new RegExp('\\b' + searchTerm, 'i');
const found = data.filter(item => regex.test(item));防抖优化
为输入框添加防抖函数减少频繁搜索。
function debounce(func, delay) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, arguments), delay);
};
}
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
searchDOM(this.value);
}, 300));异步 API 搜索
结合 AJAX 或 Fetch 实现远程搜索。
async function searchAPI(query) {
try {
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
return await response.json();
} catch (error) {
console.error('Search failed:', error);
return [];
}
}高级搜索功能
实现多条件复合搜索。
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, search) {
const regex = new RegExp(`(${search})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}这些方法可以根据具体需求组合使用，构建从简单到复杂的不同搜索功能实现方案。
