Bootstrap下拉实时后台搜索功能 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	`该事件将会在下拉选项的值改变的时候被调用`