select2中，獲取數據庫中的數據作為select2的option,或者說是：加載遠程數據（Loading remote data）

下面是詳細的步驟，select2官網：http://select2.github.io/examples.html

加載遠程參數或者數據庫中的數據，2者性質類似；除此之外，本文還涉及select2中搜索查詢的功能

我們知道，select2單選時，是存在查詢功能的，但是這樣的查詢是要查出所有的數據，並在select2中顯示;而本例是只有用戶輸入的查詢字段超過了指定字符數，才會將查詢的結果顯示在下拉框中。

相關示例與顯示效果可見select2官網：Loading remote data，相關內容。

(一)准備工作，建立bean類

public class Select2 {
    private String id;
    private String text;
    //省略set與get的方法public String getHtmlOption() {
        return "<option value='" + this.id + "'>" + this.text + "</option>";
    }
}

(二)准備工作，建立controller

    @ResponseBody
    @RequestMapping(value = "/loadSelect2", method = RequestMethod.POST)
    public JSONObject subjectType(@RequestParam("data") String data) {
        JSONObject ret = new JSONObject();
        try {
            List<Select2> list = new ArrayList<Select2>();
            JSONObject param = JSON.parseObject(data); 
　　　　　　　//這里使用封裝方法獲取BusinessService的class，自己想辦法；querySelect2查詢數據庫內容
            list = SpringUtils.getBean(BusinessService.class).querySelect2(param);
            Gson gson = new Gson();
            ret.put("data", JSON.parseArray(gson.toJson(list)));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ret;
    }

sevice方法：

public List<Select2> getSelect2(JSONObject json){
    String sql = this.getSQL("Select2/" + json.getString("key"));   
    Object[] param = json.getString("param").split(",");   //解析前台插入的參數 return jdbc.queryList(Select2.class, sql, param);　　//查詢數據庫，jdbc封裝了方法，這里省略
}

sql方法：SELECT code id, name text from company where code = ? and instr(name,?) > 0      //instr(factorName,?)獲取select2查詢輸入的內容
(三)js中，實現方法

其中，jsp（html）中，如下：

<select class="mater"  id="mate" style="width: 100%;">
</select>

function loadmaterialDealerOption(){
 //為select2賦初始值,其中mate與name是前台傳入的內容
    $('#mate').html('<option value="' + mate + '">' +name+ '</option>').trigger("change"); 
    $("#mate").select2({
            placeholder :"請輸入...",
            allowClear : true,
            ajax : {
                url : "/select2",
                dataType : 'json',
                delay : 250,
                method:"post",
                data : function(params) {　　　　　　　　//這里可以將sql的定位標簽與查詢輸入內容、其它參數，以json形式傳入后台
 var pjson = {
                        key : "dog",
                        param : params.term+“,”+加入其它參數   //獲取select2查詢輸入信息
                    };
                    return {
                        data : JSON.stringify(pjson) // search term
                    };
                },
                processResults : function(data, params) {
                    var options = new Array();
                    $(data.data).each(function(i, o) {
                        options.push({　　　　　　　　　　//獲取select2個必要的字段，id與text
                            id : o.id,
                            text : o.text
                        });
                    });
                    return {
                        results : options    //獲取查詢后的結果
                    };
                },
                cache : true　　　　　　　　　　//開啟緩存
            },
            language : "zh-CN",
            minimumInputLength : 2      //最少2個字符，select2才顯示查詢的內容
    }
        });
}