select2 api参数的文档

select2 api参数的文档

具体参数可以参考一下:

参数

 

类型

 

描述

Width

字符串

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

minimumInputLength

int

最小数量的字符

maximumInputLength

int

最大数量的字符

minimumResultsForSearch

Int

最小数量的结果

maximumSelectionSize

int

可选择的最大条目数

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 例如:<div id=”e1″>…</div> )

  1. $("#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=$("<li>"+e+"</li>");
$("#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请求远程数据,以截图为准:
关于select2 api参数的文档 - 知字而智 - vincent
 
关于select2 api参数的文档 - 知字而智 - vincent

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112368.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • hackbar 的简单使用

    hackbar 的简单使用https://www.cnblogs.com/wayne-tao/p/11027650.html前言:hackbar是web渗透时的经典工具,但是当我开始学习网络安全的时候,发现hackbar已经开始收费了。本篇抛砖引玉介绍几个使用方法,针对火狐浏览器的。建议与https://www.cnblogs.com/wayne-tao/tag/DVWA/一起学习。1.安装:一、Maxh…

  • Spring Cloud Eureka服务注册中心 多节点搭建(学习总结)

    Spring Cloud Eureka服务注册中心 多节点搭建(学习总结)一、前言:本文主要搭建SpringCloudEureka服务注册中心(多节点),本文基于SpringBoot1.5.2,SpringCloudCamden.SR6版本编写,版本不一致可能会有差异。下面就学习总结记录一下:二、搭建Eureka-Server首先,引入相应的依赖pom.xml:<?xmlversion=”1.0″encoding=”UTF-8″?…

  • 递归算法时间复杂度分析[通俗易懂]

    递归算法时间复杂度分析[通俗易懂]递归算法时间复杂度分析时间复杂度:一般情况下,算法中基本操作重复的次数就是问题规模n的某个函数f(n),进而分析f(n)随n的变化情况并确定T(n)的数量级。这里用‘o’来表示数量级,给出算法时间复杂度。T(n)=o(f(n));它表示随问题规模n的增大,算法的执行时间增长率和f(n)增长率成正比,这称作算法的渐进时间复杂度…

  • 最详细AMD Ryzen CPU,VMware 15安装macOS 10.15.x Catalina 记录(第一篇)[通俗易懂]

    最详细AMD Ryzen CPU,VMware 15安装macOS 10.15.x Catalina 记录(第一篇)[通俗易懂]如何在非macOS电脑上体验macOS,目前我所知道的有两种方式:真机安装(难度大,本文介绍,感兴趣的童鞋可以自行搜索);虚拟机安装。不管是真机安装还是虚拟机安装,Intel的cpu在安装过程中遇到的坑相比AMD的cpu要少很多。所以本文不介绍如何在Intelcpu的pc上安装macOS,网上教程很多,读者可自行搜索。很多AMDcpu的朋友,在用虚拟机安装macOS的过程中,肯定遇到过一些问题,并且有些问题很棘手,会被困扰几天,那么本文将介绍如何在AMDcpu的电脑上安装mac

  • C语言中volatile关键字的作用

    C语言中volatile关键字的作用一.前言1.编译器优化介绍:由于内存访问速度远不及CPU处理速度,为提高机器整体性能,在硬件上引入硬件高速缓存Cache,加速对内存的访问。另外在现代CPU中指令的执行并不一定严格按照顺序执行,没有相关性的指令可以乱序执行,以充分利用CPU的指令流水线,提高执行速度。以上是硬件级别的优化。再看软件一级的优化:一种是在编写代码时由程序员优化,另一种是由编译器进行优化。编译器优化常用的方法有:将内存变

  • Stopwatch用法

    Stopwatch用法获取系统时间计算System.currentTimeMillis()Stopwatch对程序部分代码进行计时(ms级别),适用于同步单线程代码块。StopWatch实例一次只能开启一个task,不能同时start多个task,并且在该task未stop之前不能start一个新的task,必须在该taskstop之后才能开启新的task,若要一次开启多个,需要new不同的StopWatch实例//只输出运行多少秒Stopwatchstopwatch=Stopwatch.creat.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号