// 获取搜索框和搜索按钮var searchInput = document.getElementById('search-input');var searchBtn = document.getElementById('search-btn');// 获取显示搜索结果的divvar resultDiv = document.getElementById('result');// 绑定搜索按钮的点击事件searchBtn.onclick = function() { // 获取搜索关键字 var keyword = searchInput.value.trim(); // 如果搜索关键字为空,直接返回 if (keyword === '') { return; } // 获取所有需要查找的元素 var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6'); // 遍历所有需要查找的元素 for (var i = 0; i < elements.length; i++) { // 获取当前元素的文本内容 var content = elements[i].textContent; // 如果文本内容中包含关键字,则将该元素显示出来,并在结果div中显示该元素的内容 if (content.indexOf(keyword) !== -1) { elements[i].style.display = 'block'; resultDiv.innerHTML += '<p>' + content + '</p>'; } else { elements[i].style.display = 'none'; } }};
时间: 2024-02-26 19:52:33 浏览: 26
以上是一段 JavaScript 代码,实现的功能是在页面中搜索指定的关键字,将包含该关键字的元素显示出来,并在结果 div 中显示该元素的内容。
代码中首先获取了搜索框和搜索按钮的元素,以及结果 div 的元素。然后绑定了搜索按钮的点击事件,当用户点击搜索按钮时,会获取搜索框中的关键字,如果关键字为空则不进行搜索。接着获取了页面中所有需要查找的元素,包括 p、h1、h2、h3、h4、h5、h6 等元素,遍历所有元素,如果元素的文本内容中包含关键字,则将该元素显示出来,并在结果 div 中显示该元素的内容。如果元素的文本内容中不包含关键字,则将该元素隐藏。
需要注意的是,该代码只是一个简单的搜索实现,只能搜索文本内容,不能搜索图片、视频等其他类型的内容。同时,该代码搜索关键字时没有考虑大小写问题,如果需要区分大小写可以将 indexOf 方法改为 includes 方法,并根据实际情况进行调整。
相关问题
请给出JavaScript实现查找功能的搜索框的代码
以下是一个简单的JavaScript实现查找功能的搜索框的示例代码:
HTML代码:
```html
<input type="text" id="search-input" placeholder="请输入搜索关键字">
<button id="search-btn">搜索</button>
<div id="result"></div>
```
JavaScript代码:
```javascript
// 获取搜索框和搜索按钮
var searchInput = document.getElementById('search-input');
var searchBtn = document.getElementById('search-btn');
// 获取显示搜索结果的div
var resultDiv = document.getElementById('result');
// 绑定搜索按钮的点击事件
searchBtn.onclick = function() {
// 获取搜索关键字
var keyword = searchInput.value.trim();
// 如果搜索关键字为空,直接返回
if (keyword === '') {
return;
}
// 获取所有需要查找的元素
var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6');
// 遍历所有需要查找的元素
for (var i = 0; i < elements.length; i++) {
// 获取当前元素的文本内容
var content = elements[i].textContent;
// 如果文本内容中包含关键字,则将该元素显示出来,并在结果div中显示该元素的内容
if (content.indexOf(keyword) !== -1) {
elements[i].style.display = 'block';
resultDiv.innerHTML += '<p>' + content + '</p>';
} else {
elements[i].style.display = 'none';
}
}
};
```
该示例代码实现了一个简单的搜索框,用户输入关键字后,会遍历页面中的所有段落和标题元素,并将包含关键字的元素显示出来,并在结果div中显示该元素的内容。
html用搜索框搜索列表
好的,以下是一个使用HTML实现搜索框搜索列表的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>搜索列表示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>搜索列表示例</h2>
<input type="text" id="search-input" placeholder="输入关键词搜索">
<button id="search-btn">搜索</button>
<ul id="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>梨子</li>
<li>西瓜</li>
</ul>
<script>
// 获取搜索框和按钮元素
var searchInput = document.getElementById('search-input');
var searchBtn = document.getElementById('search-btn');
// 获取列表元素
var list = document.getElementById('list');
// 绑定事件
searchBtn.onclick = function() {
// 获取搜索关键词
var keyword = searchInput.value.trim().toLowerCase();
// 遍历列表
for (var i = 0; i < list.children.length; i++) {
var li = list.children[i];
// 判断元素是否包含关键词
if (li.innerText.toLowerCase().indexOf(keyword) >= 0) {
// 显示元素
li.style.display = '';
} else {
// 隐藏元素
li.style.display = 'none';
}
}
};
</script>
</body>
</html>
```
在这个示例中,我们首先创建了一个搜索框和一个搜索按钮,以及一个包含若干列表项的无序列表。然后,在JavaScript中,我们获取了搜索框、搜索按钮和列表元素,并为搜索按钮绑定了一个事件处理程序,当用户点击搜索按钮时,我们获取搜索框中的关键词,遍历列表中的每个元素,判断是否包含关键词,然后根据判断结果显示或隐藏元素。最终,我们实现了一个搜索列表的功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)