使用js原生实现一个搜索框
时间: 2024-05-01 21:16:38 浏览: 10
HTML代码:
```html
<input type="text" id="searchInput" placeholder="请输入搜索内容">
<button id="searchBtn">搜索</button>
```
JS代码:
```javascript
const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', () => {
const searchContent = searchInput.value;
console.log('搜索内容:', searchContent);
// 进行搜索操作
});
```
上面的代码实现了一个简单的搜索框,当点击搜索按钮时,会获取搜索框中的内容,并输出到控制台。实际使用时,可以根据需要进行搜索操作。
相关问题
原生js写出搜索框搜索
好的,以下是一个基本的搜索框搜索的实现:
HTML部分:
```html
<div>
<input type="text" id="search-input" placeholder="请输入关键词">
<button id="search-btn">搜索</button>
</div>
```
JS部分:
```js
var searchBtn = document.getElementById('search-btn');
var searchInput = document.getElementById('search-input');
searchBtn.addEventListener('click', function() {
var keyword = searchInput.value;
if (keyword) {
window.location.href = 'https://www.baidu.com/s?wd=' + keyword;
}
});
```
这段代码会监听搜索按钮的点击事件,当点击时获取搜索框中输入的关键词,然后将其作为参数拼接到百度搜索的URL后面,最后跳转到搜索结果页。当然,这只是一个简单的实现,实际情况需要考虑更多的因素,比如防止XSS攻击,处理用户输入的特殊字符等。
使用js 实现一个可以搜索的表格 搜索整个表格
以下是一个简单的实现,使用了原生 JavaScript 和 HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Search Table</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Search...">
<table id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Female</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>40</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script>
// 获取表格和搜索框元素
var dataTable = document.getElementById("dataTable");
var searchInput = document.getElementById("searchInput");
// 添加事件监听器,当搜索框输入内容时触发
searchInput.addEventListener("input", function() {
var searchText = searchInput.value.toLowerCase(); // 获取搜索框输入的文本并转换成小写
var rows = dataTable.getElementsByTagName("tr"); // 获取表格中的所有行
// 遍历表格中的每一行
for (var i = 0; i < rows.length; i++) {
var name = rows[i].getElementsByTagName("td")[0].textContent.toLowerCase(); // 获取当前行的第一列文本并转换成小写
var age = rows[i].getElementsByTagName("td")[1].textContent.toLowerCase(); // 获取当前行的第二列文本并转换成小写
var gender = rows[i].getElementsByTagName("td")[2].textContent.toLowerCase(); // 获取当前行的第三列文本并转换成小写
// 如果当前行的任意一列中包含搜索文本,则显示当前行,否则隐藏当前行
if (name.includes(searchText) || age.includes(searchText) || gender.includes(searchText)) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
});
</script>
</body>
</html>
```
该代码会创建一个包含搜索框和表格的 HTML 页面,并使用 JavaScript 实现表格搜索功能。当用户输入搜索文本时,JavaScript 会遍历表格中的每一行,检查每一行的每一列是否包含搜索文本,并根据搜索结果显示或隐藏表格行。