bootstrap select 用法

我们要做的功能是 点击下拉显示搜索框和数据，搜索框内输入关键字可以匹配数据内容，并可以多选

实现效果如下

首先引入jquery和bootstrap

  <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link rel="stylesheet" href="dist/css/bootstrap-select.css">
  <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
  <script src="dist/js/bootstrap-select.js"></script>

html中的代码

  <div class="form-group row form-group-lg">
  	<label class="col-sm-2 control-label text-right">选择学生</label>
  	<div class="col-sm-3 form-group">
  		<select class="form-control selectpicker" multiple data-live-search="true"></select>
  	</div>
  </div>

js中的代码

$(function () {
    $.ajax({
        method: 'get',
        dataType: "json",
        url: "/api/teacher/queryGroupByTeacher",
        success: function (data) {
            //console.log(data.rows.groupid);
            var groupid = data.rows.groupid
            $.ajax({
                method: 'get',
                dataType: "json",
                url: "/api/student/queryStudentByGroupAndStudent",
                data: {
                    groupid: groupid,
                    name: ''
                },
                success: function (res) {
                    var str = '';
                    for (var i = 0; i < res.rows.length; i++) {
                        $('.selectpicker').append('<option value="' + res.rows[i]['id'] + '">' + res.rows[i]['name'] + '</option>');
                    }
                    $('.selectpicker').selectpicker();
                    // 缺一不可
                    $('.selectpicker').selectpicker('refresh');
                    $('.selectpicker').selectpicker('render');
                }
            })
        }
    })