bootstrap4模仿写一个百度搜索框,增加防抖
时间: 2024-02-15 17:02:28 浏览: 20
好的,我可以为您提供一份基于Bootstrap 4的百度搜索框代码,同时增加防抖功能。
HTML代码如下:
```
<div class="container mt-5">
<form>
<div class="form-group">
<input type="text" class="form-control" id="searchInput" placeholder="请输入搜索内容">
</div>
</form>
</div>
```
JavaScript代码如下:
```
<script>
const searchInput = document.querySelector('#searchInput');
let timerId = null;
searchInput.addEventListener('input', function() {
clearTimeout(timerId);
timerId = setTimeout(function() {
console.log('发送搜索请求,搜索内容为:', searchInput.value);
}, 500);
});
</script>
```
在这个代码中,我们使用了Bootstrap 4的表单组件来创建搜索框,同时使用了JavaScript的防抖技术来避免用户输入过快导致频繁发送搜索请求的问题。当用户输入内容时,我们会清除之前的定时器,并设置一个新的定时器,等待500毫秒后才真正的发送搜索请求。您可以根据自己的需求来调整防抖时间。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)