jQuery bootstrap-select下拉多选和搜索

1.前台直接绑定

<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<script src="dist/js/jquery-2.1.4.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>


<div class="form-group" >
                        <label class="control-label col-sm-2" for="teacher">教师：</label>
                        <div class=" col-sm-9">
                            <select size="1" name="teacher" id="teacher" class="selectpicker select" data-live-search="true">
                                <option value="">请选择教师</option>
                                @{
    foreach (var teach in ViewBag.teacherlist)
    {
        <option value="@teach.id" data-username="@teach.username" data-userid="@teach.user_id" data-userrealname="@teach.realname_cn">@teach.realname_cn|@teach.username</option>
    }
}
                            </select>
                        </div>
                    </div>

2.效果

3.后台动态加载绑定

 <div class="col-sm-3" style="min-height: 40px;">
            <select size="1" name="teacherid" id="teacherid" class="selectpicker select" data-live-search="true" onchange="InitTeacherTableInfo()">
                @*<option value="">选择老师</option>*@
            </select>
        </div>




function InitTeacherInfo(isown, defaulttext, defaultselectid) {
    var defaultstatus = "";
    if (isown) {
        defaultstatus = "disabled";
    }
    var objteacherId = $("#teacherid");
    var objSelectId = $("#selectid").val();
    if (objSelectId == null || objSelectId == "") {
        objteacherId.empty();
        if (defaultselectid == "") {
            objteacherId.append("<option value='' selected " + defaultstatus + " >" + defaulttext + "</option>");
        }
        else {
            objteacherId.append("<option value='' " + defaultstatus + " >" + defaulttext + "</option>");
        }
        objteacherId.selectpicker("refresh");
        return;
    }

    if (objSelectId != '') {
        $.ajax({
            type: "POST",
            url: "/TeacherCourseTable/GetTeacherInfo",
            data: {
                selectId: objSelectId
            },
            datatype: "json",
            async: false,
            cache: false,
            success: function (data) {
                if (data.d != null) {
                    var teacherInfo = data.d;
                    if (teacherInfo.length > 0) {
                        objteacherId.empty();
                        if (defaultselectid == "") {
                            objteacherId.append("<option value='' selected " + defaultstatus + " >" + defaulttext + "</option>");
                        }
                        else {
                            objteacherId.append("<option value='' " + defaultstatus + " >" + defaulttext + "</option>");
                        }
                        var optGroup = ""
                        for (var i = 0; i < teacherInfo.length; i++) {
                            if (i == 0) {
                                optGroup += "<option value='" + teacherInfo[i].teacher_id + "' selected >" + teacherInfo[i].teacher_name + "</option>";
                            } else {
                                optGroup += "<option value='" + teacherInfo[i].teacher_id + "'>" + teacherInfo[i].teacher_name + "</option>";
                            }
                        }
                        objteacherId.append(optGroup);
                        objteacherId.selectpicker("refresh");
                    }
                    InitTeacherTableInfo();                     
                }
            },
            error: function () {
                showErrorTips("网络错误");
            }
        });
    }
}

  初始化：  $('#teacher').selectpicker('refresh');

  搜索 ：   data-live-search="true"

  官网：https://silviomoreto.github.io/bootstrap-select/