詳細(xì)屬性參考官方API，https://github.com/select2/select2/releases/tag/4.0.5
注：4.0.5版本API與3.x版本有差異，有些屬性已廢棄，以下列出常用屬性及其參考值：
1、API
| 屬性 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| data | Array of objects | Null | 數(shù)據(jù)集合，基礎(chǔ)數(shù)據(jù)格式{id:"", text:"", selected: true/選中/, disabled: true/失效/} |
| width | string | “” | 寬度 |
| style | string | “” | 樣式 |
| ajax | object | null | Ajax請(qǐng)求數(shù)據(jù) |
| minimumResultsForSearch | Integer | null | 設(shè)置支持搜索的最小集合，設(shè)置為負(fù)數(shù)，隱藏搜索框 |
| minimumInputLength | Integer | 輸入指定長(zhǎng)度字符后開始搜索 | |
| multiple | boolean | False | 是否多選，默認(rèn)單選 |
| maximumSelectionSize | Integer | 支持最大的選擇數(shù)量，int/function | |
| maximumInputLength | Integer | 支持搜索的最大字符數(shù) | |
| placeholder | String | “” | 選擇提示 |
| allowClear | Boolean | false | 是否顯示清除按鈕，只有設(shè)置了placeholder才有效 |
| closeOnSelect | Boolean | true | 是否選中后關(guān)閉選擇框，默認(rèn)true |
| templateSelection | callback | 選中項(xiàng)樣式 | |
| templateResult | callback | 選項(xiàng)樣式 | |
| matcher | callback | 過(guò)濾選項(xiàng)集合 | |
| sorter | callback | 選項(xiàng)結(jié)果集排序 | |
| theme | String | 主題，可以設(shè)置bootstrap主題 | |
| tags | Boolean | 是否可動(dòng)態(tài)創(chuàng)建選項(xiàng) | |
| tokenSeparators | Aray | 輸入時(shí)使用分隔符創(chuàng)建新選項(xiàng) | |
| createTag | callback | 創(chuàng)建新標(biāo)簽 | |
| insertTag | callback | 在選項(xiàng)集合后插入標(biāo)簽 | |
| disabled | boolean | false | 是否失效 |
| debug | boolean | false | 是否開啟debug |
注：initSelection 和query已廢棄
2、定義組件Select2
/**
* 創(chuàng)建select2基礎(chǔ)組件
*/
select2: function(selector, option, allDefault){
if(allDefault){
$(selector).select2(option);
}else{
$(selector).select2($.extend(true, {}, defaultOption, option));
}
}
3、測(cè)試用例
html（省略）
js
require(["jquery", "js/component/Select2"], function($, Select2){
$(document).ready(function(){
var data = [{id:"1", text:"測(cè)試1"}, {id:"2", text:"測(cè)試2"}];
var format = function(data){
return $("" + data.text+ "111" + "");
}
// 基本搜索
Select2.select2("#select", {data: data});
// 無(wú)搜索框
Select2.select2("#noSearchSelect", {data: data, minimumResultsForSearch: -1});
// 多選
Select2.select2("#multiSelect", {data: data, multiple: true});
// 最多輸入的字符數(shù)
Select2.select2("#maxInput", {data: data, maximumInputLength: 2});
// 顯示清除按鈕
Select2.select2("#allowClear", {data: data, placeholder: "123", allowClear: true});
// 格式化選項(xiàng)
Select2.select2("#formatSection", {data: data, templateSelection: format,
templateResult: format});
// ajax請(qǐng)求數(shù)據(jù)
Select2.select2("#ajaxSelect", {width:"50%", ajax: {
url: 'https://api.github.com/orgs/select2/repos',
data: function (params) {
var query = {
search: params.term,
type: 'public'
}
return query;
}
}}, true);
// ajax分頁(yè)，官方例子，沒(méi)有出現(xiàn)分頁(yè)情況，后續(xù)用到時(shí)具體測(cè)試（2018.8.31）
Select2.select2("#ajaxPagination", {
width: "50%",
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
placeholder: 'Search for a repository',
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1
}, true);
// 動(dòng)態(tài)創(chuàng)建新選項(xiàng)
Select2.select2("#dynamicOption", {width:"50%", data:data, tags:true}, true);
});
});
