bootstrap4写一个百度搜索框,增加防抖,输入框增加'X'清除功能,点击搜索必须要等待请求结果返回后才能继续点击
时间: 2024-02-15 09:02:18 浏览: 68
Bootstrap实现弹性搜索框
好的,以下是一个符合要求的百度搜索框示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap4百度搜索框</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.search-input {
position: relative;
}
.search-input .clear-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container mt-5">
<form id="search-form">
<div class="form-group search-input">
<input type="text" class="form-control" id="search-input" placeholder="请输入搜索内容">
<span class="clear-btn" id="clear-btn">×</span>
</div>
<button type="submit" class="btn btn-primary" id="search-btn">搜索</button>
</form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
var debounceTimer = null; // 防抖定时器
var $searchInput = $('#search-input');
var $clearBtn = $('#clear-btn');
var $searchForm = $('#search-form');
var $searchBtn = $('#search-btn');
var isLoading = false; // 是否正在请求数据
// 输入框防抖
$searchInput.on('input', function() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(function() {
var keyword = $searchInput.val();
if (keyword) {
$clearBtn.show();
} else {
$clearBtn.hide();
}
}, 500);
});
// 点击清除按钮
$clearBtn.on('click', function() {
$searchInput.val('').focus();
$clearBtn.hide();
});
// 提交搜索请求
$searchForm.on('submit', function(event) {
event.preventDefault();
if (isLoading) {
return;
}
isLoading = true;
$searchBtn.prop('disabled', true);
var keyword = $searchInput.val().trim();
// 模拟请求
setTimeout(function() {
isLoading = false;
$searchBtn.prop('disabled', false);
alert('搜索结果:' + keyword);
}, 2000);
});
});
</script>
</body>
</html>
```
解释一下代码中的几个关键点:
1. 防抖:使用了定时器延迟处理输入框输入事件,避免用户输入过程中频繁触发请求。这里设置的延迟时间为500毫秒,可以根据实际情况进行调整。
2. 清除按钮:使用了绝对定位和居中方式使得清除按钮可以在输入框内部右侧居中显示。点击清除按钮会清空输入框内容,并隐藏清除按钮。
3. 请求等待:在提交搜索请求时,禁用了搜索按钮,并且设置了isLoading变量用于标记当前是否正在请求数据,避免用户重复点击。
4. 请求结果:这里使用了setTimeout模拟请求,请求完成后弹出一个提示框显示搜索结果,实际应用中可以替换为真实的搜索请求。
阅读全文