input搜索框实时检索功能实现
时间: 2023-07-20 15:34:59 浏览: 68
实现输入框实时检索功能,可以使用JavaScript实现,具体流程如下:
1. 给输入框绑定一个oninput事件,每次输入框内容发生变化时触发该事件。
2. 在事件处理函数中,获取输入框的值,并根据这个值来过滤需要检索的数据。
3. 将过滤后的数据展示在页面上,可以使用DOM操作来实现。
下面是一个简单的示例代码:
HTML代码:
```
<input type="text" id="search-input" placeholder="请输入关键字">
<ul id="result-list">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
<li>搜索结果4</li>
</ul>
```
JavaScript代码:
```
// 获取输入框和结果列表
const searchInput = document.querySelector('#search-input');
const resultList = document.querySelector('#result-list');
// 绑定oninput事件
searchInput.addEventListener('input', function() {
// 获取输入框的值
const keyword = this.value.trim().toLowerCase();
// 获取所有的搜索结果
const results = resultList.querySelectorAll('li');
// 遍历搜索结果,根据关键字过滤
results.forEach(function(result) {
const text = result.innerText.trim().toLowerCase();
if (text.includes(keyword)) {
result.style.display = 'block';
} else {
result.style.display = 'none';
}
});
});
```
上面的代码实现了一个简单的输入框实时检索功能,每次输入框内容发生变化时,都会过滤搜索结果并展示在页面上。你可以根据实际需求进行修改和优化。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)