jquery select2

曹自怡
2023-12-01

select2下载地址:https://github.com/select2/select2/releases.io/

参数解释:

参数类型描述
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函数函数用于确定下一个搜索词应该是什么

1、select2使用多选异步获取数据 --- 单选去掉 multiple即可

        $("#select2").select2({
    		minimumInputLength: 1,
    		placeholder: '请键入搜索名称',
    		allowClear: true,
    		multiple: true,
    		language : 'zh-CN',
    		id:function(item) {
    			return item.id;
    		},
    		ajax: {
    			url: 'http://XXX',
    			dataType: 'json',
    			delay: 250,
    			//quietMillis: 100,
    			data: function(params) {
    				return {
    					q: params.term //, // search term
    				};
    			},
    			processResults: function ( data, params ) {
    				return {
    					results: data.jData
    				};
    			},
    			cache: true
    		},
    		escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    	})

上面实现异步取数据的selecte的下拉选择框

2、初始化选择

  • 在selecte2 前面加入初始化selecte代码: $("#select").html(strHtml);
  • 在$('#selecte2').selecte2().val(arrId).trigger("change");

3、完整代码

        var strHtml = "";
		var column = new Array();
		var column_id = new Array();
		for(var i = 0; i < sParam.length; i++){//已选中的数据集合
			var column_data = {}
			column_data['id'] = sParam[i]['id'];
			column_data['text'] = sParam[i]['text'];
			strHtml += '<option value="' + sParam[i]['id'] + '">' + sParam[i]['text'] + '</option>'
			column.push(column_data);
			column_id.push(column_data['id']);
		}
		$("#selecte2").html(strHtml);
        
        $("#selecte2").select2({
    		minimumInputLength: 1,
    		placeholder: '请键入搜索名称',
    		allowClear: true,
    		multiple: true,
    		language : 'zh-CN',
    		id:function(item) {
    			return item.id;
    		},
    		initSelection: function (element, callback) {     
                callback(column);//这里初始化  column为上面已选中的数组
            },
    		ajax: {
    			url: url,
    			dataType: 'json',
    			delay: 250,
    			//quietMillis: 100,
    			data: function(params) {
    				return {
    					q: params.term //, // search term
    				};
    			},
    			processResults: function ( data, params ) {
    				return {
    					results: data.jData //返回 [{"id":,"text":},{}]
    				};
    			},
    			cache: true
    		},
    		escapeMarkup: function (markup) { return markup; }, // let our custom formatter work

    	}).val(column_id).trigger("change");

转载于:https://my.oschina.net/hnlxy/blog/793882

 类似资料:

相关阅读

相关文章

相关问答