Bootstrap下拉实时后台搜索功能
由于公司客户实在太多,做了一个bootstrap-select的实时搜索.
// 下拉搜索框
="gid" id="gid" class="selectpicker form-control" data-live-search="true">
//下面是js
>
$("#gid").on('shown.bs.select',function(e){
//获取下拉select里的输入框,提示一下搜索下拉
$(this).prev().find("input").attr('placeholder',"请输入公司名称搜索");
//绑定一下键盘输入
$(this).prev().find("input").keyup(function(){
//为select里的输入框绑定id,方便获取
$(this).prev().find("input").attr('id',"dangname");
var dangname = $(this).val();
var datas = {
'gname':dangname
};
setTimeout(function () {//延时2秒
guestlist('#gid',datas);
},2000);
})
});
function guestlist(obj,datas){
$(obj).empty();
$.ajax({
type: "post",
url:'',//查询url
data:datas,
async:false,
dataType: "json",
success: function(data){
if (data !='') {
var html = '';
$.each(data,function (index,ele) {
html += '';
});
$(obj).html(html);
}else {
$(obj).html('');
}
//刷新select
$(obj).selectpicker('refresh');
}
});
}
【Bootstrap下拉实时后台搜索功能】bootstrap-select的events：
| 事件类型 | 事件描述 |
|---|---|
| show.bs.select | 当调用展示实例方法时，此事件被调用 |
| shown.bs.select | 当下拉选项已经完全展开（CSS样式加载完毕）时，此事件将会被调用 |
| hide.bs.select | 当隐藏下拉选项的实例方法被调用后，此事件将会被调用 |
| hidden.bs.select | 当下拉选项隐藏完毕（CSS样式加载完毕）时，此事件会被立马调用 |
| loaded.bs.select | 下拉选项被初始化之后会立马调用此事件 |
| rendered.bs.select | 该事件将会在render实例调用之后被调用 |
| refreshed.bs.select | 该事件将会在refresh实例调用之后被调用 |
| changed.bs.select | 该事件将会在下拉选项的值改变的时候被调用 |
推荐阅读
- tableView|tableView 头视图下拉放大 重写
- Elasticsearch|Elasticsearch 简介
- 实时|实时 OLAP 系统 Druid
- SRS(简单实时视频服务)|SRS(简单实时视频服务) 笔记（1）- 体验
- 有趣的oython|python疲劳驾驶实时检测项目讲解（附代码）
- 下拉菜单
- macOS|macOS SwiftUI 组件之 实用下拉菜单 （教程含源码）
- 百度爱番番实时CDP建设实践
- Injection|Injection For Xcode11 macOS 10.15 Catalina 亲测可用iOS模拟器UI界面调试实时刷新工具
- 6、bootstrap-表格