select2 api参数的文档
|
具体参数可以参考一下： 参数 |
类型 |
描述 |
|
Width |
字符串 |
控制 宽度 样式属性的Select2容器div |
|
minimumInputLength |
int |
最小数量的字符 |
|
maximumInputLength |
int |
最大数量的字符 |
|
minimumResultsForSearch |
Int |
最小数量的结果 |
|
maximumSelectionSize |
int |
可选择的最大条目数 |
|
placeholder |
字符串 |
选择初始值 |
|
separator |
字符串 |
分隔符字符或字符串用来划定id |
|
allowClear |
布尔 |
此选项只指定占位符 |
|
multiple |
布尔 |
Select2是否允许选择多个值 |
|
openOnEnter |
打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。 |
|
|
id |
函数 |
函数用于获取id从选择对象或字符串id存储代表的关键 |
|
matcher |
函数 |
用于确定是否搜索词匹配一个选项时使用一个内置的查询功能 |
|
sortResults |
函数 |
用于排序列表搜索之前显示的结果。 |
|
formatSelection |
函数 |
函数用于呈现当前的选择 |
|
formatResult |
函数 |
函数用来渲染结果, |
|
formatResultCssClass |
函数 |
函数用于添加css类结果元素 |
|
formatNoMatches |
字符串/函数 |
字符串包含“不匹配”消息,或 |
|
formatSearching |
字符串/函数 |
字符串包含“搜索… “消息,或 |
|
formatAjaxError |
字符串/函数 |
字符串包含消息“加载失败”,或 |
|
formatInputTooShort |
字符串/函数 |
包含“搜索”输入太短消息的字符串,或 |
|
formatInputTooLong |
字符串/函数 |
包含“搜索”输入太短消息的字符串,或 |
|
formatInputTooLong |
字符串/函数 |
包含“搜索输入字符串太长”消息,或 |
|
formatSelectionTooBig |
字符串/函数 |
字符串包含“你不能选择任何更多的选择”消息,或 |
|
formatLoadMore |
字符串/函数 |
字符串/函数 |
|
createSearchChoice |
函数 |
创建一个新的可选选择从用户的搜索词。 允许创建通过查询选择不可用 功能。 有用的用户可以创建动态的选择时,如“标签”usecase。 |
|
createSearchChoicePosition |
函数/字符串 |
定义的位置插入元素 |
|
initSelection |
函数 |
调用Select2创建允许用户初始化选择的值 select2附加到元素 |
|
tokenizer |
函数 |
记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。 |
|
tokenSeparators |
函数 |
一个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [',',' '] 。 |
|
query |
函数 |
函数用于搜索词的查询结果。 |
|
ajax |
对象 |
选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级的特性,比如节流和无序的反应。 |
|
data |
数组/对象 |
择建在查询功能,使用数组。 |
|
tags |
数组/函数 |
将Select2放入“标签'mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。 |
|
containerCss |
函数/对象 |
内联css将被添加到select2的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。 |
|
containerCssClass |
函数/字符串 |
Css类将被添加到select2容器的标签。 |
|
dropdownCss |
函数/对象 |
内联css将被添加到select2下拉的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。 |
|
dropdownCssClass |
函数/字符串 |
Css类将被添加到select2下拉的容器。 |
|
dropdownAutoWidth |
布尔 |
当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。 |
|
adaptContainerCssClass |
函数 |
过滤器/重命名的css类,因为他们被复制从源标签select2容器标签 |
|
adaptDropdownCssClass |
函数 |
滤器/重命名的css类,因为他们被复制从源标签select2拉标签 |
|
escapeMarkup |
函数 |
函数用于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防止javascript注入。 |
|
selectOnBlur |
布尔 |
设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。 |
|
loadMorePadding |
整数 |
定义了多少像素需要加载下一页前折以下。 默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。 这个选项可以用来触发加载更快,可能导致更流畅的用户体验。 |
|
nextSearchTerm |
函数 |
函数用于确定下一个搜索词应该是什么 |
- $("#e1").select2();
- $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值
- $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中（好像单个还不行，以数组形式才行）
- $("#el").click(function() { $("#e2").select2("val", ""); }); // 不选中任何值
- $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象
- $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
- $("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框
- $("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框
- $("#e1").select2({placeholder: "Select a state"}); // 下拉框 提示
- $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值
- $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); }); // id="CA"，id="MA" 选中
- $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象
- $("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });
// 加载数据
$("#e11").select2({
placeholder: "Select report type",allowClear: true,data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
// 加载数组 支持多选
$("#e11_2").select2({createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },multiple: true,data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
function log(e) {
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 关闭事件
.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"); });
官网文档地址是：http://select2.github.io/select2/#documentation。说再多也没用，最后我们来个实例来证明一下ajax请求远程数据，以截图为准：
miniNameInModal.select2({ ajax: { url:Api.getMiniClassListForJqGrid, //当用户打开控件时，Select2会向指定的URL发出请求（除非有 minimumInputLength设置），并且每当用户在搜索框中输入时也是如此。默认情况下，它将以查询字符串参数的形式发送以下内容： data: function (term,page) {// term ：搜索框中的当前搜索词。 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是后端返回的原始数据，data.rows的数据格式[{…}, {…}, {…}, {…}, {…}]; debugger 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);//item对象增加一个属性。 result.push(row); }); if((data.rows).length>0){ return {results :result,more:true};//返回一个数组，result数组的格式是[[],[],[]] }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(){ //选学员 // findStudentAutoComplate.select2({ // placeholder: '请选择学员', // 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({
'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 :'请选择学员', 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}; } } } })
//设置select2 placeholder currentAddressSelect.select2({ formatNoMatches: function () { return '暂无数据' + '<a class="link pull-right">添加小区</a>'; } });
// 加载学员下拉框 $('form[id=frm] select[name=studentId]').select2({ formatNoMatches: '找不到匹配的数据' });
schoolEl.select2({ formatNoMatches: function () { if(Index.authFuncBtnTags.indexOf('BTN_CREATE_SCHOOL')!=-1){//加了权限才显示 return '暂无数据' + '<a class="addSchool link pull-right">添加学校</a>'; }else{ return '暂无数据'; } } });
placeholder: "请输入", minimumInputLength: 1, separator: ",", // 分隔符 maximumSelectionSize: 5, // 限制数量 initSelection: function(element, callback) { // 初始化时设置默认值 }, createSearchChoice: function(term, data) { // 创建搜索结果（使用户可以输入匹配值以外的其它值） return { id: term.mid, text: term.name }; }, formatSelection: function(item) { return item.name;//注意此处的name，要和ajax返回数组的键值一样 }, // 选择结果中的显示 formatResult: function(item) { return item.name;//注意此处的name }, // 搜索列表中的显示 ajax: { url: "{:U('Admin/Member/getzj')}", // 异步请求地址 dataType: "json", // 数据类型 data: function(term, page) { // 请求参数（GET） return { q: term }; }, results: function(data, page) { return data; }, // 构造返回结果 escapeMarkup: function(m) { return m; } // 字符转义处理 }
//转介绍类型的时候，自动带出转介绍人的select2
/*flag 0 代表返回placeholder 1 代表返回无数据提示 2 代表返回初始提示 无 代表返回api */ function getAutoCompleteApi(cusOrg, flag) { // options in getCusOrgOnlyIntroduce is hardcoded var apiList = [EduBoss.serviceApi.getAutoCompeleteCustomerForAll, EduBoss.serviceApi.getUserAutoCompleteForAll, EduBoss.serviceApi.getAutoCompleteStudentForCustomerNewIntroduce]; var tipList = ['请选择客户', '请选择员工', '请选择学员']; var cusList = ['客户转介绍', '员工转介绍', '学员转介绍']; var noDataTips = ['没有找到相关客户', '没有找到相关员工', '没有找到相关学员']; var initTips = ['输入客户姓名/手机号', '输入员工姓名', '输入学员姓名']; 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) {
debugger
var 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){
debugger
console.log(data+"uud")},
noDataTips: getAutoCompleteApi(text, 1),
initTips: getAutoCompleteApi(text, 2),
})
} else {
safeDestroyAutocomplete(introducerSel);
}
})
modal.on('show.bs.modal', function () {//要等modal出来之后，才能再找到对应的元素，触发绑定的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">转介绍类型</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("修改转介绍"); $.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 = 1 debugger return { 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 || '暂无数据') : (options.initTips || '输入关键字后查询'); } }) },