select2使用总结..docVIP

link rel=stylesheet media=screen type=text/css href= script type =text/javascript src = 注意jsp页面的代码，即它有两种格式，一种是input，一种是select，当是select的时候，不能用ajax.第一种写死的数据的：Loading Array Data function resultFormatResult(medata) return medata.text; function resultFormatSelection(medata) return medata.text; var data=id:New,text:New,id:Open,text:Open,id:Close,text:Close; $(#status).select2( placeholder: Search for a user, /multiple:true, /多选 data: results: data, text: text , formatSelection: resultFormatResult, formatResult: resultFormatResult ); $(#status).select2(val, New);/单选 var preload_data = id: New, text: New, locked: true , id: Open, text: Open ; $(#status).select2(data,preload_data);/多选第二种从后台获取数据最友好的一种：Loading Array Datafunction initUsersSelect(selectId) var realNames = getAllUsers(); $(#+selectId).select2( placeholder:Please Select one, data: results: realNames, text: text , formatSelection: resultFormatResult, formatResult: resultFormatResult );第三种从后台获取数据：Loading Remote Data $(#projectLeader).select2( placeholder: Search for a user, minimumInputLength: 2, ajax: / instead of writing the function to execute the request we use Select2s convenient helper url: system/findUsersByCondition, dataType: json, data: function (term, page) return realName: term, / search term page_limit: 10 ; , results: function (data, page) / parse the results into the format expected by Select2. / since we are using custom formatting functions we do not need to alter remote JSON data var realNames = new Array(); for (var i = 0; i data.length; i+) realNames.push(id: datai.userId, text: datai.realName); return results: realNames; , formatResult: resultFormatResult, / omitted for brevity, see the source of this page formatSelection: resultFormatSelection, / omitted for brevity, see the source of this page dropdownCssClass: bigdrop, / apply css that makes the dropdown taller escapeMarkup: function (m) return m; / we do not want to escape markup since we are displaying html in results );第四种从后台获取数据：Infinite Scroll with Remote Data $(#projectLeader).select2( placeholder: Please select one, minimumInputLength: 2, ajax: url: system/findUsers, dataType: json, quietMillis: 100, data: function (term, page) / page is the one-based page number tracked by Select2 return name: term, /search term iDisplayStart: (page-1)*10, iDisplayLength: 10 ; , results: function (data, page) var more = (page * 10) data.totalRecords; / whether or not there are more results available var realNames = new Array(); for (var i = 0; i data.totalDisplayRecords; i+) realNames.push(id: data.resultsi.realName, text: data.resultsi.realName); return results: realNames,more:more; , formatResult: resultFormatResult, / omitted for brevity, see the source of this page formatSelection: resultFormatResult, / omitted for brevity, see the source of this page dropdownCssClass: bigdrop, / apply css that makes the dropdown taller escapeMarkup: function (m) return m; / we do not want to escape markup since we are displaying html in results );action： public String findUsers() try String param = parameters .get(name ); if (param != null) String name = param0; queryConditionDTO .setName(name); int iDisplayStart = 0; int iDisplayLength = 0; String iDisplayStarts = parameters .get(iDisplayStart ); if (iDisplayStarts != null) iDisplayStart = Integer.valueOf(iDisplayStarts0); String iDisplayLengths = parameters .get(iDisplayLength ); if (iDisplayLengths != null) iDisplayLength = Integer.valueOf(iDisplayLengths0); Page userPage = userService .findUsers(queryConditionDTO , iDisplayStart / iDisplayLength +1, iDisplayLength); results = userPage.getObjectsList(); totalRecords = userPage.getTotalRecordsCount(); totalDisplayRecords = (long ) userPage.getObjectsList().size(); return processSuccess(); catch (Exception ex) return processException(ex); 第五种从后台获取数据的： Please Select one $realName $(#projectLeader).select2( placeholder: Search for a user, minimumInputLength: 2, formatResult: resultFormatResult, / omitted for brevity, see the source of thi