使用select2.js实现多功能下拉框,select2中文api

最近项目中有个需求是商品能够选择多个标签,类似jire中选择标签:
这里写图片描述

能把选择后选项显示在输入框中,删除时连同整个标签一起删。经过网上咨询、请教同事后,得到一致意见是使用select2

下面是使用select2的初始化、动态赋值,实现标签化多选、以及遇到的问题:

1,从http://select2.github.io/examples.html处下载select2源码,把dist目录中css、js引用到html中,

2,在页面中新建:<div id="test_select2"></div>

3,初始化select2很简单,$('#test_select2').select2();就行,这是没有任何属性和值的最简单初始化,下面介绍几个常用的属性:

var itemList =[{id:1,text:'测试1'}{}{}{{}{}{}{}];//类似的json数组格式,可以单独用jquery的ajax获取服务器的数据。
$('#test_select2').select2({
    placeholder : '输入话题关键字',
    tags : true,
    multiple : true,
    height: '40px',
    maximumSelectionLength : 3,
    allowClear : true,
    language: "zh-CN",
    data : itemList itemList是[{}{}{}{}]格式的数组
 });

4,经过上面三步后的效果:
这里写图片描述

下表是select2常用的属性:

属性类型说明
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函数函数用于确定下一个搜索词应该是什么

Select2.js点击清除,清除原来的值

$("#clearQuery").click(function (){
    $("#DepartmentId").select2("data", null);
    $("#OwnerCode").select2("data", null);
    $("#hfDiseaseId").select2("data", null);
}); 

这里写图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页