详细属性参考官方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

Select2 4.0.5 API的更多相关文章

  1. ASP.NET CORE 1.0 MVC API 文档用 SWASHBUCKLE SWAGGER实现

    from:https://damienbod.com/2015/12/13/asp-net-5-mvc-6-api-documentation-using-swagger/ 代码生成工具: https ...

  2. Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Zepto 1.0 中文手册,Zepto 1.0 API-translate by yaotaiyang

    Zepto,Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API 1.0 中文版,Z ...

  3. 从头编写 asp.net core 2.0 web api 基础框架 (1)

    工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...

  4. 从头编写 asp.net core 2.0 web api 基础框架 (3)

    第一部分:http://www.cnblogs.com/cgzl/p/7637250.html 第二部分:http://www.cnblogs.com/cgzl/p/7640077.html 之前我介 ...

  5. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (3)

    Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...

  6. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)

    工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...

  7. 从头编写asp.net core 2.0 web api 基础框架 (5) + 使用Identity Server 4建立Authorization Server (7) 可运行前后台源码

    前台使用angular 5, 后台是asp.net core 2.0 web api + identity server 4. 从头编写asp.net core 2.0 web api 基础框架: 第 ...

  8. 新浪微博 使用OAuth2.0调用API

    # -*- coding: cp936 -*- #python 2.7.10 #xiaodeng #新浪微博 使用OAuth2.0调用API #微博开放接口的调用,都需要获取用户的身份认证.目前微博开 ...

  9. 分析现有 WPF / Windows Forms 程序能否顺利迁移到 .NET Core 3.0(使用 .NET Core 3.0 Desktop API Analyzer )

    今年五月的 Build 大会上,微软说 .NET Core 3.0 将带来 WPF / Windows Forms 这些桌面应用的支持.当然,是通过 Windows 兼容包(Windows Compa ...

随机推荐

  1. js格式化输入框内金额、银行卡号[转]

    这篇文章主要介绍了js格式化输入框内金额.银行卡号,采用“keyup”事件处理格式化,每4位数一组中间空格隔开,如何格式化输入框内金额.银行卡号,需要了解的朋友可以参考一下 我们在项目中经常遇到需要格 ...

  2. vi/vim tab键空格数修改

    更改Tap键单位 vi/vim编辑器默认情况下,每按一次Tap相对于8个空格. (1)临时性更改 使用vi打开文件后,输入如下命令: :set tabstop=4 命令释义:更改为相当于四个空格. ( ...

  3. 从 0 → 1,学习Linux该这么开始!

    首先我们还是来普及以下概念,讲点虚的.现在是图形系统的天下,windows我们用了20多年.成功归功与它图形界面,你会点鼠标吗你会敲键盘吗?所以你会上网会聊天会玩游戏了.那么,0基础接触的Linux, ...

  4. 逆元-P3811 【模板】乘法逆元-洛谷luogu

    https://www.cnblogs.com/zjp-shadow/p/7773566.html -------------------------------------------------- ...

  5. face detection[Face R-CNN]

    face r-cnn是腾讯ai实验室的作品,而且登录过腾讯ai实验室官网,发现果然硕果累累,不得不佩服. 1 引言 人脸检测虽然相对之前有了不小的进步,可是还是因为真实世界中人脸图像的明显变化导致仍然 ...

  6. face detection[S^3FD]

    本文来自<\(S^3\)FD: Single Shot Scale-invariant Face Detector>,时间线为2017年11月. 0 引言 基于锚的目标检测方法,是通过分类 ...

  7. mysql基本知识点梳理和查询优化

    目录 一.索引相关 二.EXPLIAN中有用的信息 三.字段类型和编码 四.SQL语句总结 五.踩坑 六.千万大表在线修改 七.慢查询日志 八.查看sql进程和杀死进程 九.一些数据库性能的思考 本文 ...

  8. js 对象与数组相互转化的快捷方法 Object.keys()、Object.values()、Object.entries()

    Object.keys() Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. 例如: let ...

  9. Django ORM模型:想说爱你不容易

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. 使用Python的Django模型的话,一般都会用它自带的ORM(Object-relational ma ...

  10. .Net Core 在 Linux-Centos上的部署实战教程(二)

    上篇我们说了 如何在Linux上部署.net core  但是有心的同学会发现你关闭掉终端网站就不能访问了,这个原因是因为直接 dotnet GetConfigFile.dll --server.ur ...