Bootstrap 下拉框带搜索组件
html代码
data-live-search=“true” 属性必加
<div class="row form-group">
<div class="col-lg-2"></div>
<div class="form-group col-lg-8" >
<label class="input-group">
<span class="input-group-addon">用户名称:</span>
<select class="col-lg-6 form-control" id="userName" name="name"
data-live-search="true">
</select>
</label>
</div>
</div>
js代码
$(function () {
//初始化select
$("#userName").selectpicker({
'selectedText': 'cat'
});
})
查询出所有用户绑定到select下的option
$.ajax({
url:'/system/user/listUser.json',
type:'get',
dataType:'json',
success:function(d){
if(d.state=="success"){
var html ="";
$.each(d.date,function (i,v) {
html+='<option value='+v.id+'>'+v.chineseName+'</option>'
})
$("#smsUserForm [name=name]").html(html);
//重新加载一遍select
$("#smsUserForm [name=name]").selectpicker('refresh');
}
}
})
运行效果: