根据页面展示的内容,设计一个纯前端的搜索栏,实现搜索功能
时间: 2024-03-11 10:48:47 浏览: 133
好的,我可以为您提供一个简单的纯前端搜索栏的设计,实现搜索功能,具体如下:
在页面上添加一个搜索框和一个搜索按钮。
使用 JavaScript 监听搜索按钮的点击事件。
当用户点击搜索按钮时,获取搜索框中的关键字。
遍历页面中需要搜索的内容,比如文章标题、文章内容、标签等。
对每个需要搜索的内容进行关键字匹配,如果匹配成功,则将该内容显示在搜索结果区域。
如果没有搜索到任何内容,可以显示一个提示信息。
下面是一个简单的示例代码:
HTML 代码:
<input type="text" id="search-input">
<button id="search-btn">搜索</button>
<div id="search-results"></div>
JavaScript 代码:
// 监听搜索按钮的点击事件
document.getElementById('search-btn').addEventListener('click', function() {
// 获取搜索框中的关键字
var keyword = document.getElementById('search-input').value;
var results = document.getElementById('search-results');
results.innerHTML = '';
// 遍历页面中需要搜索的内容
var contents = document.querySelectorAll('.searchable');
for (var i = 0; i < contents.length; i++) {
var content = contents[i].textContent;
// 对每个需要搜索的内容进行关键字匹配
if (content.indexOf(keyword) !== -1) {
// 如果匹配成功,则将该内容显示在搜索结果区域
var div = document.createElement('div');
div.textContent = content;
results.appendChild(div);
}
}
// 如果没有搜索到任何内容,显示一个提示信息
if (results.children.length === 0) {
var div = document.createElement('div');
div.textContent = '没有搜索到任何内容';
results.appendChild(div);
}
});
在这个示例中,我们通过监听搜索按钮的点击事件,获取搜索框中的关键字,然后遍历页面中需要搜索的内容,对每个需要搜索的内容进行关键字匹配,如果匹配成功,则将该内容显示在搜索结果区域。如果没有搜索到任何内容,则显示一个提示信息。