js
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
2. 监听搜索框的输入事件，每次输入时获取搜索关键词，然后根据关键词进行搜索并更新搜索结果容器的内容。
js
searchInput.addEventListener('input', function() {
const keyword = this.value.trim(); // 获取搜索关键词并去除两端空格
if (keyword) {
const results = search(keyword); // 搜索关键词
updateResults(results); // 更新搜索结果
} else {
clearResults(); // 搜索关键词为空时清空搜索结果
}
});
3. 实现搜索函数，根据关键词从数据源中筛选匹配的结果。
js
function search(keyword) {
const data = [...]; // 数据源，可以是数组、对象等
const results = data.filter(item => {
return item.title.toLowerCase().includes(keyword.toLowerCase()); // 匹配标题中包含关键词的项
});
return results;
}
4. 实现更新搜索结果的函数，将搜索结果以HTML字符串的形式渲染到搜索结果容器中。
js
function updateResults(results) {
let html = '';
results.forEach(item => {
const title = item.title.replace(new RegExp(keyword, 'ig'), '$&'); // 将关键词高亮显示
const content = item.content;
html += `${title}
${content}
`;
});
searchResults.innerHTML = html;
}
5. 实现清空搜索结果的函数，将搜索结果容器的内容清空。
js
function clearResults() {
searchResults.innerHTML = '';
}
完整代码如下：
js
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
searchInput.addEventListener('input', function() {
const keyword = this.value.trim();
if (keyword) {
const results = search(keyword);
updateResults(results);
} else {
clearResults();
}
});
function search(keyword) {
const data = [...];
const results = data.filter(item => {
return item.title.toLowerCase().includes(keyword.toLowerCase());
});
return results;
}
function updateResults(results) {
let html = '';
results.forEach(item => {
const title = item.title.replace(new RegExp(keyword, 'ig'), '$&');
const content = item.content;
html += `${title}
${content}
`;
});
searchResults.innerHTML = html;
}
function clearResults() {
searchResults.innerHTML = '';
}
其中，关键词高亮使用了CSS样式：
css
.highlight {
color: red;
font-weight: bold;
}
1. EventTarget.addEventListener()