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> ）

1. $("#e1").select2(); 
2. $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 獲取選中的ID值
3. $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 選中（好像單個還不行，以數組形式才行）
4. $("#el").click(function() { $("#e2").select2("val", ""); });  // 不選中任何值
5. $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 獲取選中對象
6. $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
7. $("#e1").click(function () { $("#e2").select2("open"); }); // 打開下拉框
8. $("#e1").click(function () { $("#e2").select2("close"); }); // 關閉下拉框
9. $("#e1").select2({placeholder: "Select a state"});  // 下拉框 提示
10. $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 獲取選中的ID值
11. $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });   // id="CA"，id="MA" 選中
12. $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 獲取選中JSON對象
13. $("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });

14. ---

// 加載數據

$("#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請求遠程數據，以截圖爲準：