bootstrap框架下的selectpicker搜索实现根据搜索内容去后台实时查询
想要实现下拉框的搜索功能，输入搜索项后去后台查询，然后将查询的列表返回到下拉框中，不再是以往那种先获取所有可选项，然后前端根据输入的搜索内容显示可选项
// 下拉搜索框
<select name="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
版权声明：本文为博主原创文章，转载请附上博文链接！