select2 api参数中文文档

select2 api参数的文档

具体参数可以参考一下:

参数

类型描述

Width字符串控制 宽度 样式属性的Select2容器div

minimumInputLengthint最小数量的字符

maximumInputLengthint最大数量的字符

minimumResultsForSearchInt最小数量的结果

maximumSelectionSizeint可选择的最大条目数

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 例如:

$("#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=$("

  • "+e+"
  • ");

    $("#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请求远程数据,以截图为准:

    转自http://blog.csdn.net/StoneEpigraph/article/details/76409408
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 212,686评论 6 492
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 90,668评论 3 385
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 158,160评论 0 348
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 56,736评论 1 284
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 65,847评论 6 386
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 50,043评论 1 291
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 39,129评论 3 410
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 37,872评论 0 268
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 44,318评论 1 303
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 36,645评论 2 327
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 38,777评论 1 341
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 34,470评论 4 333
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 40,126评论 3 317
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 30,861评论 0 21
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 32,095评论 1 267
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 46,589评论 2 362
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 43,687评论 2 351

    推荐阅读更多精彩内容