bootstrap框架下的selectpicker搜索实现根据搜索内容去后台实时查询

想要实现下拉框的搜索功能，输入搜索项后去后台查询，然后将查询的列表返回到下拉框中，不再是以往那种先获取所有可选项，然后前端根据输入的搜索内容显示可选项

// 下拉搜索框
<select name="gid" id="gid" class="selectpicker form-control" data-live-search="true">
<option value="">请选择公司</option>
</select>
//下面是js
<script>
$("#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 += '<option value="' + ele.id + '">' + ele.unitname+ '</option>';
});
$(obj).html(html);
}else {
$(obj).html('<option value="">请选择客户</option>');
}
//刷新select
$(obj).selectpicker('refresh');
}
});
}
</script>
---------------------
作者：旮不旮旯不旯
来源：CSDN
原文：https://blog.csdn.net/wg526125649/article/details/84622527
版权声明：本文为博主原创文章，转载请附上博文链接！