利用js实现静态页面搜素
时间: 2023-11-26 07:06:25 浏览: 59
虽然静态网页不支持搜索功能,但是可以使用JavaScript来实现一些类似搜索的功能,例如通过关键字过滤内容。
下面是一个简单的例子,实现在静态网页中通过输入关键字来过滤内容的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>静态网页搜索</title>
<meta charset="utf-8">
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<input type="text" id="search-input" placeholder="输入关键字">
<ul id="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>西瓜</li>
<li>草莓</li>
<li>蓝莓</li>
<li>芒果</li>
</ul>
<script type="text/javascript">
// 获取输入框和列表
var input = document.getElementById('search-input');
var list = document.getElementById('list');
// 监听输入框变化事件
input.addEventListener('input', function() {
var keyword = input.value.trim().toLowerCase();
// 如果关键字为空,则显示所有列表项
if (keyword === '') {
for (var i = 0; i < list.children.length; i++) {
list.children[i].classList.remove('hide');
}
} else {
// 遍历列表项,如果文本中包含关键字,则显示该项,否则隐藏该项
for (var i = 0; i < list.children.length; i++) {
var text = list.children[i].textContent.trim().toLowerCase();
if (text.indexOf(keyword) >= 0) {
list.children[i].classList.remove('hide');
} else {
list.children[i].classList.add('hide');
}
}
}
});
</script>
</body>
</html>
```
这个例子中,通过监听输入框的变化事件,获取输入的关键字,然后遍历列表项,如果文本中包含关键字,则显示该项,否则隐藏该项。通过添加和移除`hide`类来实现隐藏和显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)