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	函数	函数用于确定下一个搜索词应该是什么

Example Code（针对目标元素为 div 例如：<div id="e1">...</div> ）

$("#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) {

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的数据格式[{…}, {…}, {…}, {…}, {…}];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};//返回一个数组，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({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 :'请选择学员',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

    /*flag0 代表返回placeholder1 代表返回无数据提示2 代表返回初始提示无 代表返回api*/function getAutoCompleteApi(cusOrg, flag) {// options in getCusOrgOnlyIntroduce is hardcodedvar 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) {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出来之后，才能再找到对应的元素，触发绑定的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 = 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 || '暂无数据') : (options.initTips || '输入关键字后查询');}})},

转载于:https://www.cnblogs.com/susan-home/p/9214269.html