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的數據格式[{…}, {…}, {…}, {…}, {…}];
                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({
        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

    /*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 || '輸入關鍵字后查詢');
                    }
                })
            },

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 select2 api參數的文檔 select2 api參數的文檔 select2 api參數中文文檔 bootstrap select2 參數詳解 select2插件用法以及參數說明 select2 參數手冊 docker api參數文檔 select2的簡單使用 Select2 使用使用select2心得