select2 api参数的文档
select2 api參數(shù)的文檔
| 具體參數(shù)可以參考一下： 參數(shù) | ? 類型 | ? 描述 |
| Width | 字符串 | 控制?寬度?樣式屬性的Select2容器div |
| minimumInputLength | int | 最小數(shù)量的字符 |
| maximumInputLength | int | 最大數(shù)量的字符 |
| minimumResultsForSearch | Int | 最小數(shù)量的結(jié)果 |
| maximumSelectionSize | int | 可選擇的最大條目數(shù) |
| placeholder | 字符串 | 選擇初始值 |
| separator | 字符串 | 分隔符字符或字符串用來劃定id |
| allowClear | 布爾 | 此選項只指定占位符 |
| multiple | 布爾 | Select2是否允許選擇多個值 |
| openOnEnter | ? | 打開下拉如果設(shè)置為true,當(dāng)用戶按下回車鍵,Select2關(guān)閉。?默認(rèn)情況下啟用這個選項。 |
| id | 函數(shù) | 函數(shù)用于獲取id從選擇對象或字符串id存儲代表的關(guān)鍵 |
| matcher | 函數(shù) | 用于確定是否搜索詞匹配一個選項時使用一個內(nèi)置的查詢功能 |
| sortResults | 函數(shù) | 用于排序列表搜索之前顯示的結(jié)果。 |
| formatSelection | 函數(shù) | 函數(shù)用于呈現(xiàn)當(dāng)前的選擇 |
| formatResult | 函數(shù) | 函數(shù)用來渲染結(jié)果, |
| formatResultCssClass | 函數(shù) | 函數(shù)用于添加css類結(jié)果元素 |
| formatNoMatches | 字符串/函數(shù) | 字符串包含“不匹配”消息,或? |
| formatSearching | 字符串/函數(shù) | 字符串包含“搜索…?“消息,或? |
| formatAjaxError | 字符串/函數(shù) | 字符串包含消息“加載失敗”,或? |
| formatInputTooShort | 字符串/函數(shù) | 包含“搜索”輸入太短消息的字符串,或? |
| formatInputTooLong | 字符串/函數(shù) | 包含“搜索”輸入太短消息的字符串,或? |
| formatInputTooLong | 字符串/函數(shù) | 包含“搜索輸入字符串太長”消息,或? |
| formatSelectionTooBig | 字符串/函數(shù) | 字符串包含“你不能選擇任何更多的選擇”消息,或? |
| formatLoadMore | 字符串/函數(shù) | 字符串/函數(shù) |
| createSearchChoice | 函數(shù) | 創(chuàng)建一個新的可選選擇從用戶的搜索詞。?允許創(chuàng)建通過查詢選擇不可用?功能。?有用的用戶可以創(chuàng)建動態(tài)的選擇時,如“標(biāo)簽”usecase。 |
| createSearchChoicePosition | 函數(shù)/字符串 | 定義的位置插入元素 |
| initSelection | 函數(shù) | 調(diào)用Select2創(chuàng)建允許用戶初始化選擇的值?select2附加到元素 |
| tokenizer | 函數(shù) | 記號賦予器函數(shù)可以處理后輸入搜索框的輸入每一個按鍵和提取?并選擇選擇。 |
| tokenSeparators | 函數(shù) | 一個字符串?dāng)?shù)組定義標(biāo)記為默認(rèn)的分隔符?分詞器?功能。?默認(rèn)情況下,此選項設(shè)置為一個空數(shù)組標(biāo)記這意味著使用默認(rèn)?編譯器是禁用的。?通常是明智的,設(shè)置該選項值相似?[',','?']?。 |
| query | 函數(shù) | 函數(shù)用于搜索詞的查詢結(jié)果。 |
| ajax | 對象 | 選擇內(nèi)置的ajax查詢功能。?這個對象作為快捷方式有手動編寫一個函數(shù),執(zhí)行ajax請求。?內(nèi)置函數(shù)支持更高級的特性,比如節(jié)流和無序的反應(yīng)。 |
| data | 數(shù)組/對象 | 擇建在查詢功能,使用數(shù)組。 |
| tags | 數(shù)組/函數(shù) | 將Select2放入“標(biāo)簽'mode,用戶可以添加新的選擇和預(yù)先存在的標(biāo)簽是通過提供?這個選項的屬性是一個?數(shù)組?或者一個?函數(shù)?返回一個?數(shù)組的?對象?或?字符串?。?如果?字符串?而不是使用?對象?他們將有一個被轉(zhuǎn)換成一個對象?id?和?文本?屬性相等?的值?字符串?。 |
| containerCss | 函數(shù)/對象 | 內(nèi)聯(lián)css將被添加到select2的容器。?一個對象包含css屬性/值密鑰對或一個函數(shù),這個函數(shù)返回一個對象。 |
| containerCssClass | 函數(shù)/字符串 | Css類將被添加到select2容器的標(biāo)簽。 |
| dropdownCss | 函數(shù)/對象 | 內(nèi)聯(lián)css將被添加到select2下拉的容器。?一個對象包含css屬性/值密鑰對或一個函數(shù),這個函數(shù)返回一個對象。 |
| dropdownCssClass | 函數(shù)/字符串 | Css類將被添加到select2下拉的容器。 |
| dropdownAutoWidth | 布爾 | 當(dāng)設(shè)置為?真正的?嘗試自動尺寸下拉基于內(nèi)容的寬度。 |
| adaptContainerCssClass | 函數(shù) | 過濾器/重命名的css類,因為他們被復(fù)制從源標(biāo)簽select2容器標(biāo)簽 |
| adaptDropdownCssClass | 函數(shù) | 濾器/重命名的css類,因為他們被復(fù)制從源標(biāo)簽select2拉標(biāo)簽 |
| escapeMarkup | 函數(shù) | 函數(shù)用于后處理標(biāo)記從格式化程序返回功能。?默認(rèn)情況下這個功能轉(zhuǎn)義的html實體,以防止javascript注入。 |
| selectOnBlur | 布爾 | 設(shè)置為?真正的?如果你想要Select2選擇當(dāng)前高亮選項時模糊。 |
| loadMorePadding | 整數(shù) | 定義了多少像素需要加載下一頁前折以下。?默認(rèn)值是?0?這意味著結(jié)果列表需要滾動到下一個頁面的底部加載的結(jié)果。?這個選項可以用來觸發(fā)加載更快,可能導(dǎo)致更流暢的用戶體驗。 |
| nextSearchTerm | 函數(shù) | 函數(shù)用于確定下一個搜索詞應(yīng)該是什么 |
??
Example Code（針對目標(biāo)元素為 div 例如：<div id="e1">...</div> ）
function?log(e)?{ var?e=$("<li>"+e+"</li>"); $("#events_11").append(e); e.animate({opacity:1},?10000,?'linear',?function()?{?e.animate({opacity:0},?2000,?'linear',?function()?{e.remove();?});?}); } // 對元素 進行事件注冊 $("#e11")
.on("change",?function(e)?{?log("change "+JSON.stringify({val:e.val,?added:e.added,?removed:e.removed}));?}) ?// 改變事件
.on("select2-opening",?function()?{?log("opening");?}) ?// select2 打開中事件
.on("select2-open",?function()?{?log("open");?}) ? ? // select2 打開事件
.on("select2-close",?function()?{?log("close");?}) ?// select2 關(guān)閉事件
.on("select2-highlight",?function(e)?{?log?("highlighted val="+?e.val+" choice="+?JSON.stringify(e.choice));}) ?// 高亮
.on("select2-selecting",?function(e)?{?log?("selecting val="+?e.val+" choice="+?JSON.stringify(e.choice));}) ?// 選中事件
.on("select2-removing",?function(e)?{?log?("removing val="+?e.val+" choice="+?JSON.stringify(e.choice));}) ?// 移除中事件
.on("select2-removed",?function(e)?{?log?("removed val="+?e.val+" choice="+?JSON.stringify(e.choice));}) ?// 移除完畢事件
.on("select2-loaded",?function(e)?{?log?("loaded (data property omitted for brevity)");}) ?// 加載中事件
.on("select2-focus",?function(e)?{?log?("focus");}) ? ?// ?獲得焦點事件
.on("select2-blur",?function(e)?{?log?("blur");}); ? ? // ?失去焦點事件 $("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); }); 官網(wǎng)文檔地址是：http://select2.github.io/select2/#documentation。說再多也沒用，最后我們來個實例來證明一下ajax請求遠程數(shù)據(jù)，以截圖為準(zhǔn)： ? miniNameInModal.select2({ajax: {url:Api.getMiniClassListForJqGrid,//當(dāng)用戶打開控件時，Select2會向指定的URL發(fā)出請求（除非有 minimumInputLength設(shè)置），并且每當(dāng)用戶在搜索框中輸入時也是如此。默認(rèn)情況下，它將以查詢字符串參數(shù)的形式發(fā)送以下內(nèi)容：data: function (term,page) {// term ：搜索框中的當(dāng)前搜索詞。var query = {name: term,row:20,page:page,search: term,type: 'public'}//Query parameters will be ?search=[term]&type=public&name=[term]return query;},results:function(data,page){ //data是后端返回的原始數(shù)據(jù)，data.rows的數(shù)據(jù)格式[{…}, {…}, {…}, {…}, {…}];debuggerpage === 1 && (dataObjs = []);var result=[];$(data.rows).each(function(i,item){var row=[],dataObj={};row['id']=item.miniClassId;row['text']=item.name;dataObj = $.extend({},item,{totalLastClassHours:item.totalClassHours-item.consume});dataObjs.push(dataObj);//item對象增加一個屬性。 result.push(row);});if((data.rows).length>0){return {results :result,more:true};//返回一個數(shù)組，result數(shù)組的格式是[[],[],[]]}else{return {results :result};}}}}); miniNameInModal.select2({placeholder :'請選擇班課',ajax :{url :function(term,page){return Api.getMiniClassListForJqGrid+'?name='+(term||'')+'&rows=20&page='+page;},results:function(data,page){page === 1 && (dataObjs = []);var result=[];$(data.rows).each(function(i,item){var row=[],dataObj={};row['id']=item.miniClassId;row['text']=item.name;dataObj = $.extend({},item,{totalLastClassHours:item.totalClassHours-item.consume});dataObjs.push(dataObj);result.push(row);});if((data.rows).length>0){return {results :result,more:true};}else{return {results :result};}}}})
?
// 初始化選項function initSelectOptions(){//選學(xué)員// findStudentAutoComplate.select2({// placeholder: '請選擇學(xué)員',// ajax: {// url: function (term, page) {// return Util.getURLData(Api.getStudentListShortly + '?name=' + (term || '') + '&rows=20&page=' + page);// },// results: function (response) {// var result = [];// var data = response.data.datas;// $(data).each(function (i, item) {// var row = [];// row['id'] = item.id;// row['text'] = item.name;// result.push(row);// });// if (data.length > 0) {// return { results: result, more: true };// } else {// return { results: result };// }// }// }// }); } $('#reviewUser').select2({width: '100%', formatSelection: function (data, container, escapeMarkup) {$('#checkout-form').valid();return data ? escapeMarkup(data.text) : undefined;}}); $('#approveUser').select2({formatSelection: function (data, container, escapeMarkup) {$('#checkout-form').valid();return data ? escapeMarkup(data.text) : undefined;}}); currentStudentName.select2({placeholder :'請選擇學(xué)員',ajax :{url:function(term,page){return Api.getOneOnOneStudentList+'?blCampusId=' + currentCampusId + '&name='+(term||'')+'&_search=true&sord=asc&rows=20&page='+page;},dataType: 'json',multiple: true,results:function(data,page){page === 1 && (dataObjs = []);var result=[];$(data.rows).each(function (i, item) {var dataObj={},row=[];row['id']=item.id;row['text']=item.name;dataObj = $.extend({},item);dataObjs.push(dataObj);result.push(row);});if((data.rows).length>0){return {results :result,more:true};}else{return {results :result};}}}}) //設(shè)置select2 placeholder currentAddressSelect.select2({formatNoMatches: function () {return '暫無數(shù)據(jù)' + '<a class="link pull-right">添加小區(qū)</a>';}}); // 加載學(xué)員下拉框$('form[id=frm] select[name=studentId]').select2({formatNoMatches: '找不到匹配的數(shù)據(jù)'}); schoolEl.select2({formatNoMatches: function () {if(Index.authFuncBtnTags.indexOf('BTN_CREATE_SCHOOL')!=-1){//加了權(quán)限才顯示return '暫無數(shù)據(jù)' + '<a class="addSchool link pull-right">添加學(xué)校</a>';}else{return '暫無數(shù)據(jù)';}}}); placeholder: "請輸入",minimumInputLength: 1,separator: ",", // 分隔符maximumSelectionSize: 5, // 限制數(shù)量initSelection: function(element, callback) { // 初始化時設(shè)置默認(rèn)值 },createSearchChoice: function(term, data) { // 創(chuàng)建搜索結(jié)果（使用戶可以輸入匹配值以外的其它值）return {id: term.mid,text: term.name};},formatSelection: function(item) {return item.name;//注意此處的name，要和ajax返回數(shù)組的鍵值一樣}, // 選擇結(jié)果中的顯示formatResult: function(item) {return item.name;//注意此處的name}, // 搜索列表中的顯示 ajax: {url: "{:U('Admin/Member/getzj')}", // 異步請求地址dataType: "json", // 數(shù)據(jù)類型data: function(term, page) { // 請求參數(shù)（GET）return {q: term};},results: function(data, page) {return data;}, // 構(gòu)造返回結(jié)果escapeMarkup: function(m) {return m;} // 字符轉(zhuǎn)義處理}//轉(zhuǎn)介紹類型的時候，自動帶出轉(zhuǎn)介紹人的select2
/*flag0 代表返回placeholder1 代表返回?zé)o數(shù)據(jù)提示2 代表返回初始提示無 代表返回api*/function getAutoCompleteApi(cusOrg, flag) {// options in getCusOrgOnlyIntroduce is hardcodedvar apiList = [EduBoss.serviceApi.getAutoCompeleteCustomerForAll, EduBoss.serviceApi.getUserAutoCompleteForAll, EduBoss.serviceApi.getAutoCompleteStudentForCustomerNewIntroduce];var tipList = ['請選擇客戶', '請選擇員工', '請選擇學(xué)員'];var cusList = ['客戶轉(zhuǎn)介紹', '員工轉(zhuǎn)介紹', '學(xué)員轉(zhuǎn)介紹'];var noDataTips = ['沒有找到相關(guān)客戶', '沒有找到相關(guān)員工', '沒有找到相關(guān)學(xué)員'];var initTips = ['輸入客戶姓名/手機號', '輸入員工姓名', '輸入學(xué)員姓名'];var index = $.inArray(cusOrg, cusList);if (index === -1) return '';if (flag === 0) {return tipList[index];} else if (flag === 1) {return noDataTips[index];} else if (flag === 2) {return initTips[index];} else {return apiList[index];}}function safeDestroyAutocomplete(sel) {var $el = $(sel);if ($el.hasClass("select2-offscreen")) {$el.select2('destroy');}} $("#customerNewIntroduceType").on("change", function (event) {debuggervar introducerSel = $('#introducer');safeDestroyAutocomplete(introducerSel);cusNewIntroTypeName = $(this).val();var text = $(this).find(":selected").text(),url = getAutoCompleteApi(text);if (url) {safeDestroyAutocomplete(introducerSel);Util.normalSelect2(introducerSel, {placeholder: getAutoCompleteApi(text, 0),api: url,labelFormat: function (data) {//data =?"Wed Jan 17 11:44:54 CST 2018（）,1"debugger// console.log(data+"yys")return data ? data.substring(0, data.indexOf(',')) : '';},results:function(data){debuggerconsole.log(data+"uud")},noDataTips: getAutoCompleteApi(text, 1),initTips: getAutoCompleteApi(text, 2),})} else {safeDestroyAutocomplete(introducerSel);}})modal.on('show.bs.modal', function () {//要等modal出來之后，才能再找到對應(yīng)的元素，觸發(fā)綁定的change事件。 如果是loadHtmlModalWithParameters的形式加載modal，那么load的Modal里邊需要加上//Util.modalExec(modal.parents('.modal'), initData);以上這一句要寫在initEven的后面。等modal完全加載出來之后再iniData（），initData之后就不需要另外的initData了。 var introducerSel = $('#introducer');safeDestroyAutocomplete(introducerSel);$("#customerNewIntroduceType").change();});
<div class="col-md-6 form-group"><label class="must-input">轉(zhuǎn)介紹類型</label><div><select name="customerNewIntroduceType" class="required form-control select2" data-from="customerNewIntroduceType" id="customerNewIntroduceType">//加了select2回顯的時候為什么要change一下呢？ //如果是普通的select則不需要change，使用Util.fillElmentValueByTag(data, 'data-from', null, modal);就可以回顯出來了。 </select></div> </div>
//修改jqgrid.on('click', '.mod', function () {var id = $(this).parents('tr').attr('data-id');modal.find("#myModalLabel").text("修改轉(zhuǎn)介紹");$.get(Api.getCustomerNewIntroduct, {customerNewIntroductId:id}, function (res) {if (res.resultCode === 0) {var data = res.data;Util.fillElmentValueByTag(data, 'data-from', null, modal);//followUpUserId.prop('disabled', true);recordDate.prop('disabled', true);$("#customerName").prop('disabled', true);contract.prop('disabled', true);modal.modal('show');modal.find("#moreCustomerInfo").hide();$("#customerNewIntroduceType").change();$("#introducer").prev("div").find(".select2-chosen").text(data.introducer);oldCustomerNewIntroduceType = data.customerNewIntroduceType;oldIntroducer = data.introducer;}})})
?
? normalSelect2: function (item, options) {options = options || {};item.select2({placeholder: options.placeholder || '請選擇',ajax: {url: function (term, page) {if (!term) return [];var api = options.api;if ($.type(api) === 'function') api = api();return Util.getURLData(api + (/\?/g.test(api) ? '&' : '?') + 'term=' + (term || ''));},results: function (data, page) { //data = (7) [{label: "sdfxf（）,86305", value: "86305"}, {…}, {…}, {…}, {…}, {…}, {…}], page = 1debuggerreturn {results: data.map(function (item) {return {id: item.value,text: options.labelFormat ? options.labelFormat(item.label) : item.label}})};}},formatNoMatches: function (term) {return term ? (options.noDataTips || '暫無數(shù)據(jù)') : (options.initTips || '輸入關(guān)鍵字后查詢');}})},?
轉(zhuǎn)載于:https://www.cnblogs.com/susan-home/p/9214269.html
總結(jié)
以上是生活随笔為你收集整理的select2 api参数的文档的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js两个数组对象通过相同元素匹配筛选
- 下一篇： java数组之binarySearch查