详细属性参考官方API，https://github.com/select2/select2/releases/tag/4.0.5
注：4.0.5版本API与3.x版本有差异，有些属性已废弃，以下列出常用属性及其参考值：
1、API
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| data | Array of objects | Null | 数据集合，基础数据格式{id:"", text:"", selected: true/选中/, disabled: true/失效/} |
| width | string | “” | 宽度 |
| style | string | “” | 样式 |
| ajax | object | null | Ajax请求数据 |
| minimumResultsForSearch | Integer | null | 设置支持搜索的最小集合，设置为负数，隐藏搜索框 |
| minimumInputLength | Integer | 输入指定长度字符后开始搜索 | |
| multiple | boolean | False | 是否多选，默认单选 |
| maximumSelectionSize | Integer | 支持最大的选择数量，int/function | |
| maximumInputLength | Integer | 支持搜索的最大字符数 | |
| placeholder | String | “” | 选择提示 |
| allowClear | Boolean | false | 是否显示清除按钮，只有设置了placeholder才有效 |
| closeOnSelect | Boolean | true | 是否选中后关闭选择框，默认true |
| templateSelection | callback | 选中项样式 | |
| templateResult | callback | 选项样式 | |
| matcher | callback | 过滤选项集合 | |
| sorter | callback | 选项结果集排序 | |
| theme | String | 主题，可以设置bootstrap主题 | |
| tags | Boolean | 是否可动态创建选项 | |
| tokenSeparators | Aray | 输入时使用分隔符创建新选项 | |
| createTag | callback | 创建新标签 | |
| insertTag | callback | 在选项集合后插入标签 | |
| disabled | boolean | false | 是否失效 |
| debug | boolean | false | 是否开启debug |
注：initSelection 和query已废弃
2、定义组件Select2
-
/**
-
* 创建select2基础组件
-
*/
-
select2: function(selector, option, allDefault){
-
if(allDefault){
-
$(selector).select2(option);
-
}else{
-
$(selector).select2($.extend(true, {}, defaultOption, option));
-
}
-
}
3、测试用例
html（省略）
js
-
require(["jquery", "js/component/Select2"], function($, Select2){
-
$(document).ready(function(){
-
var data = [{id:"1", text:"测试1"}, {id:"2", text:"测试2"}];
-
var format = function(data){
-
return $("" + data.text+ "111" + "");
-
}
-
// 基本搜索
-
Select2.select2("#select", {data: data});
-
// 无搜索框
-
Select2.select2("#noSearchSelect", {data: data, minimumResultsForSearch: -1});
-
// 多选
-
Select2.select2("#multiSelect", {data: data, multiple: true});
-
// 最多输入的字符数
-
Select2.select2("#maxInput", {data: data, maximumInputLength: 2});
-
// 显示清除按钮
-
Select2.select2("#allowClear", {data: data, placeholder: "123", allowClear: true});
-
// 格式化选项
-
Select2.select2("#formatSection", {data: data, templateSelection: format,
-
templateResult: format});
-
// ajax请求数据
-
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分页，官方例子，没有出现分页情况，后续用到时具体测试（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);
-
-
// 动态创建新选项
-
Select2.select2("#dynamicOption", {width:"50%", data:data, tags:true}, true);
-
-
});
-
});
链接：https://www.jianshu.com/p/778e9f21fc3d
评论（0）