基于bootstrap-select插件，实现select下拉框模糊查询功能

1.引用js、css

bootstrap.css 、 bootstrap-select.min.css

bootstrap.min.js 、bootstrap-select.min.js

2. js初始化插件

  $(window).on('load', function () {
        // 中文重写select 查询为空提示信息
        $('.selectpicker').selectpicker({
            noneSelectedText: '',
            noneResultsText: '',
            liveSearch: true,
            size:5   //设置select高度，同时显示5个值
        });
    });

3. jsp select 框案例，js实例初始化数据

  <div class="form-group">
        <label class="col-sm-2 control-label">考试科目</label>
        <div class="col-sm-8">
            <select class="selectpicker input-xlarge" style="outline: none;width:200px;"
                  data-live-search="true" id="subjectId" name="testSubject">
                  <option value="">请选择考试科目</option>
            </select>
         </div>
  </div>

  //通过年级id,关联科目列表
    function getSubjectBysgId(stageGradeId) {
        var subject_id = $("#subject_id").val();
        $.ajax({
            url: "${ctx}/bussstudy/bussSubject/getBussSubjectBysgId",
            data: {stageGradeId: stageGradeId},
            type: "POST",
            success: function (data) {
                if (data != null) {
                    var html = "<option value=''>请选择科目名称</option>";
                    for (var i = 0; i < data.length; i++) {
                        if (subject_id == data[i].subjectId) {
                            html += "<option  value='" + data[i].subjectId + "'selected='selected'>" +  

                        data[i].subjectName + "</option>";  
                        } else {
                            html += "<option  value='" + data[i].subjectId + "'>" + data[i].subjectName + "</option>";
                        }
                    }
                    $("#subjectId").html(html);
                    $('.selectpicker').selectpicker('refresh');//加载select框选择器
                }
            }
        });
    }