select2 api参数的文档

2024-01-22
来源:网络整理

具体参数请参考:

范围

类型

描述

细绳

控制宽度样式属性的容器div

整数

最小字符数

整数

最大字符数

rch

INT

最少结果数

整数

可选择的最大条目数

细绳

选择初始值

细绳

用于分隔 id 的分隔符或字符串

布尔值

该选项仅指定占位符

布尔值

是否允许选择多个值

打开下拉菜单 如果设置为 true,则当用户按 键时它将关闭。 默认情况下启用此选项。

ID

功能

用于从选择器对象获取 id 或存储代表键的字符串 id 的函数

功能

内置查询函数,用于确定搜索词是否与选项匹配

功能

用于对先前显示的结果的列表搜索进行排序。

功能

用于渲染当前选择的函数

功能

函数用于渲染结果,

功能

用于添加 css 类结果元素的函数

字符串/函数

该字符串包含“不匹配”消息,或者

函数用于呈现信息

字符串/函数

该字符串包含“搜索...”消息,或者

用于呈现搜索正在进行的显示消息的函数。

字符串/函数

该字符串包含消息“加载失败”,或者

函数用于呈现信息

字符串/函数

包含“搜索”输入太短消息的字符串,或者

函数用于呈现信息。

字符串/函数

包含“搜索”输入太短消息的字符串,或者

函数用于呈现信息

字符串/函数

包含“搜索输入字符串太长”消息,或者

函数用于呈现信息。

G

字符串/函数

该字符串包含“您无法选择更多选项”消息,或者

函数用于呈现信息

字符串/函数

字符串/函数

功能

根据用户的搜索词创建新的可选选择。 允许通过查询选择创建不可用的要素。 当用户可以创建动态选择(例如“标签”)时很有用。

函数/字符串

在定义的位置插入元素

功能

调用 以允许用户初始化要附加到元素的选定值

功能

函数可以处理每次击键,并在输入搜索框后提取并选择输入。

功能

定义标记为默认分词器函数的分隔符的字符串数组。 默认情况下,此选项设置为空数组标记,这意味着禁用默认编译器。 将此选项设置为类似于 [',',''] 的值通常是明智的。

功能

用于查询搜索词结果的函数。

阿贾克斯

目的

选择内置的ajax查询功能。 该对象充当手动编写函数来执行 ajax 请求的快捷方式。 内置函数支持更高级的功能,例如节流和乱序反应。

数据

数组/对象

选择内置查询函数并使用数组。

标签

数组/函数

将进入“标签”模式,用户可以通过提供此选项的属性来添加新的选择和预先存在的标签,该属性是一个数组或返回对象或字符串数​​组的函数。 如果使用字符串而不是对象,它们将有一个值字符串被转换为彼此相等的对象 id 和文本属性。

函数/对象

内联 css 将添加到的容器。 包含 CSS 属性/值键对的对象或返回对象的函数。

函数/字符串

CSS 类将添加到容器的标签中。

函数/对象

内联 css 将添加到下拉列表的容器中。 包含 CSS 属性/值键对的对象或返回对象的函数。

函数/字符串

CSS 类将添加到下拉容器中。

布尔值

当设置为 true 时,尝试根据内容的宽度自动调整下拉列表的大小。

SS

功能

当 CSS 类从源标签复制到容器标签时过滤/重命名它们

s

功能

当 CSS 类从源标签复制到拉取标签时过滤/重命名它们

功能

用于后处理从格式化程序返回的标记函数的函数。 默认情况下,此函数会转义 HTML 实体以防止注入。

布尔值

如果您希望当前突出显示的选项在选择时模糊,请设置为 True。

整数

定义在下一页折叠到下面之前需要加载多少像素。 默认值为 0,这意味着结果列表需要滚动到下一页的底部才能加载结果。 此选项可用于更快地触发加载,从而可能带来更流畅的用户体验。

功能

用于确定下一个搜索词应该是什么的函数

代码(对于目标元素 div 例如:

...

$("#e1").();

$("#e1").( () { (" 是:"+$("#e1").("val"));}); // 获取选中的ID值

$("#e1").( () { $("#e2").("val", "CA"); }); // (好像一个还不够,只能数组形式)

$("#el").(() { $("#e2").("val", ""); }); // 不选择任何值

$("#e1").( () { var data = $("#e2").("data"); }); // 获取选中的对象

$("#e1").( () { $("#e2").("数据", {id: "CA", 文本: ""}); });

$("#e1").( () { $("#e2").("打开"); }); // 打开下拉框

$("#e1").( () { $("#e2").(""); }); // 关闭下拉框

$("#e1").({: " a "}); // 下拉框提示

$("#e1").( () { (" 是:"+$("#e2").("val"));}); // 获取选中的ID值

$("#e1").( () { $("#e8_2").("val", ["CA","MA"]); }); //, id="MA" 已选择

$("#e12").( () { (" is: "+JSON.($("#e2").("data")));});// 获取选中的JSON对象

$("#e1").( () { $("#e2").("数据", [{id: "CA", 文本: ""},{id: "MA", 文本: "" }]); })

// 下载数据

$("#e11").({

: “类型”,

: 真的,

数据:[{id:0,文本:''},{id:1,文本:'错误'},{id:2,文本:'任务'}]

});

// 加载数组支持多选

$("#").({

:(term, data) { if ($(data).(() { this.text.(term)===0; }).===0) { {id:term, text:term};} },

: 真的,

数据:[{id:0,文本:''},{id:1,文本:'错误'},{id:2,文本:'任务'}]

});

日志(e){

var e=$(""+e+"");

$("#").(e);

e.({:1}, , '', () { e.({:0}, 2000, '', () {e.(); }); });

// 为元素注册事件

$("#e11")

.on("", (e) { log(" "+JSON.({val:e.val, :e., :e.})); }) // 更改事件

.on("-", () { log(""); }) // 开启事件

.on("-open", () { log("open"); }) // 打开事件

.on("-", () { log(""); }) // 关闭事件

.on("-", (e) { log (" val="+ e.val+" ="+ JSON.(e.));}) // 高亮

.on("-", (e) { log (" val="+ e.val+" ="+ JSON.(e.));}) // 选择事件

.on("-", (e) { log (" val="+ e.val+" ="+ JSON.(e.));}) // 删除事件

.on("-", (e) { log (" val="+ e.val+" ="+ JSON.(e.));}) // 移除完成事件

.on("-", (e) { log (" (data for )");}) // 加载事件

.on("-", (e) { log("");}) // 获取焦点事件

.on("-blur", (e) { log("blur");}); // 失去焦点事件

$("#e11").(() { $("#e11").val(["AK","CO"]).(""); });

官网文档地址为:#. 说再多也没用。 最后我们举个例子来证明ajax请求远程数据。 以截图为准:

API容器

分享