select2插件遠程搜索的使用

 select2插件官方下載地址：http://select2.github.io/

下載好之后，主要使用到的是select2.js，對應的語言提示以及樣式select2.css，可以復制到自己的項目中

頁面：

<select class="select2-multiple" multiple="multiple" style="width: 100%"
　　name="system" id="system">
</select>

前端腳本：

$('.select2-multiple').select2({
    ajax: {
        url: '/admin/search-system',
        dataType: 'json',
        type: 'POST',
        delay: 250,
        data: function (params) {
            var param = new Object();
            param.condition = params.term;
            return param;
        },
        processResults: function (resp) {
            var array = new Array();
            if (resp.system) {
                for (var i = 0; i < resp.syetem.length; i++) {
                    var client = resp.client[i];
                    array.push({
                        id: system.systemId,
                        text: system.systemId + ',' + system.systemName
                    });
                }
            }
            var ret = new Object();
            ret.results = array;
            return ret;
        },
        cache: true
    },
    placeholder: '請輸入關鍵字',
});

后端數據源：

　　@RequestMapping(value = "search-system", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject searchSystem(HttpServletRequest request, String condition) {
        JSONObject jsonObject = new JSONObject();
　　　　　　　　List<System> systemList = searchSystemByCondition(condition);
　　　　　　　　JSONArray jsonArray = JSONArray.fromObject(systemList);
　　　　　　　　jsonObject.put("system", jsonArray);return jsonObject;
    }

 

參考鏈接：

http://blog.csdn.net/qq_19558705/article/details/49978731

http://www.aichengxu.com/javascript/73864.htm