帝国CMS 7.2UTF-8 + select2 4.0最新版本
笔记 by ecms 2016-07-04 14:02:49 插件   帝国CMS   

 官方网址：

https://select2.github.io/examples.html

低版本文档：

http://select2.github.io/select2/#documentation

 

经验分享：http://www.tuicool.com/articles/nYVn22e

 

1、如果默认值没有效果

请查看默认值是否是id的集合，或单个id

 

2、select2   js报错

请查看select2版本与本贴是否一致

 

 

 

XML/HTML Code复制内容到剪贴板
  1. <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  
  2. <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
  3. <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
  4.   
  5.   
  6. <!-- select2需要组件 -->  
  7. <link rel="stylesheet" type="text/css" href="css/select2.min.css" />  
  8. <script src="js/select2.full.js"></script>  

 

 

一、预先加载json，再进行匹配

XML/HTML Code复制内容到剪贴板
  1. <select class="js-example-basic-multiple"></select><!-- 下拉元素 -->  
  2. <input class="infotags form-control" id="infotags" type="text" value="大树路1,大树路2,大树路3" /><!-- 保存记录元素 -->  

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2. var $eventSelect=$('.js-example-basic-multiple'); // 下拉元素ID  
  3. var $eventInfotags = $("#infotags"); // 保存记录元素I  
  4. var dataArr=$eventInfotags.val().split(","); //获取保存是数组 （比如信息修改的时候）  
  5. $.ajax({  
  6.     url:"data.txt",  
  7.     dataType:"json",  
  8.     success:function(data,status){  
  9.         var o = data.items, html='';//获取数据 定义一个结果集合变量  
  10.         $.each(o, function(index, val) {  
  11.             html+='<option value='+val.tagname+' data-tagid='+val.tagid+'>'+val.tagname+'</option>'; // 循环出html集合  
  12.         });  
  13.         $eventSelect.html(html).select2({  
  14.             placeholder: "请选择",  
  15.             width: "500",  
  16.             tags: true,  
  17.             separator: ",", // 分隔符    
  18.             multiple: "multiple",  
  19.             multiply: true,  
  20.             initSelection: function (element, callback) {  
  21.                 var data = [];  
  22.                 $.each(dataArr,function(index, el) {  
  23.                     data[index]= {"id":el,"text":el}; // 组合选中样式数据  
  24.                 });  
  25.                 callback(data);// 默认选中  
  26.             },  
  27.         }).val(dataArr); //把结果集合赋予元素并且绑定select2 , .val是赋予下拉默认选中  
  28.         $eventSelect.on("change", function (e) {  
  29.             $eventInfotags.val($eventSelect.select2('val')); // 获取选择的数据并放到要保存的元素中  
  30.         });  
  31.     }  
  32. });  
  33. </script>  

 

2、预先加载json，并且有初始值为option的value值，单选：

JavaScript Code复制内容到剪贴板
  1. var $eventSelect=$('.example-baseic'); // 下拉元素ID  
  2. var $eventInfo2 = $("#parent_tag_id"); // 保存记录元素I  
  3. var dataArr2 = $eventInfo2.val();  
  4.   
  5. var dft_value = "<?=$tagView['parent_tag_id']?>";  
  6. var dft_text = "<?=$parentTagView['text']?>";  
  7.   
  8. var arr = [];      
  9. arr = {"id":dft_value,"text":dft_text}// 组合选中样式数据      
  10.   
  11. $.ajax({  
  12.     url:"contrl.php<?=$ecms_hashur['whehref']?>&act=getParentTags",  
  13.     dataType:"json",  
  14.     success:function(data,status){  
  15.         // console.log(data);  
  16.         $eventSelect.select2({  
  17.             placeholder: "选择父级",  
  18.             width: "100%",  
  19.             data:data.data,  
  20.             initSelection: function (element, callback) {  
  21.                 callback(arr);// 默认选中  
  22.             },  
  23.         }).val(dft_value);  
  24.     }  
  25. });  
  26.   
  27. $eventSelect.on("change", function (e) {    
  28.     data = $eventSelect.select2('val');   
  29.     $eventInfo2.val(data); // 获取选择的数据并放到要保存的元素中    
  30. });    

 

 

 

二、单选：ajax 模糊匹配 动态加载 

XML/HTML Code复制内容到剪贴板
  1. <select class="example-baseic"></select>  
  2. <input type="text" class="form-control" id="example2" value="笔记" />  

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2. // example2  
  3. var $eventSelect2=$('.example-baseic'); // 下拉元素ID  
  4. var $eventInfo2 = $("#example2"); // 保存记录元素I  
  5. var dataArr2 = $eventInfo2.val();  
  6.   
  7. $eventSelect2.select2({  
  8.     placeholder: "输入TAG",  
  9.     width: "500",  
  10.     tags: true,         // 将Select2放入“标签'mode  
  11.     separator: ",",     // 分隔符字符或字符串用来划定id  
  12.     multiply: true,     // 是否允许选择多个值  
  13.     dir: "rtl",  
  14.     initSelection: function (element, callback) {  
  15.         var data = [];  
  16.         data = {"id":dataArr2,"text":dataArr2}; // 组合选中样式数据    
  17.         callback(data);// 默认选中  
  18.     },  
  19.     ajax: {    
  20.         url: "/e/extend/api/index.php?act=getTags",    
  21.         type:"POST",  
  22.         dataType: 'json',   
  23.         delay: 500, 
  24.         data: function (params) {   
  25.             return {   
  26.                 q: params.term,     // 将输入的字符传递到ajax中，q可以改为常用的变量名   
  27.                 page: params.page   // 页码 
  28.             };   
  29.         },   
  30.         processResults: function (data, page) {   
  31.             // console.debug("ajax返回的对象是:")   
  32.             // console.debug(data.data) 
  33.             return {   
  34.                 results: data.data   
  35.             };   
  36.         },   
  37.         cache: true   
  38.     },   
  39.     escapeMarkup: function (markup) {    
  40.         // console.debug(markup)   
  41.         return markup;    
  42.     }, // let our custom formatter work   
  43.     minimumInputLength: 1,      // 最小数量的字符后才会去调用ajax   
  44.     maximumInputLength: 20,     // 最大数量的字符后才会去调用ajax   
  45.     minimumResultsForSearch: 1, // 最小数量的结果 
  46.     templateResult: formatRepo,    
  47.     templateSelection: formatRepoSelection 
  48. }); 
  49.  
  50. /* 这里2个函数是用于查询到内容后，显示在select2的下拉框里面 */   
  51. function formatRepo (repo) {  //显示在select下拉框中的模板 
  52.     if (repo.loading) return repo.text;   
  53.     var markup = '<li>' + repo.text + '</li>';   
  54.     return markup;   
  55. }   
  56.  
  57. function formatRepoSelection (repo) {   
  58.     repo.selected = true;    
  59.     if(repo.id == null || repo.id == ""){   
  60.         repo.text = '选择'   
  61.         repo.text = repo.text   
  62.     }  
  63.     $eventInfo2.val(repo.text);    
  64.     // console.debug(repo);   
  65.     // return repo.id;//下拉框中返回ID   
  66.     return repo.text;    
  67. }    
  68. /* 这里2个函数是用于查询到内容后，显示在select2的下拉框里面  end */  
  69. </script>  

 

 

三、多选 

JavaScript Code复制内容到剪贴板
  1. <select class="example-baseic3"></select>  
  2. <input type="text" class="form-control" id="example3" value="笔记,插件,JS插件" />  
  3.   
  4. <script>  
  5. // example3  
  6. var $eventSelect3=$('.example-baseic3'); // 下拉元素ID  
  7. var $eventInfo3 = $("#example3"); // 保存记录元素I  
  8. var dataArr3 = $eventInfo3.val()?$eventInfo3.val().split(","):[];  
  9.   
  10.   
  11. var data = [];    
  12. $.each(dataArr3,function(index, el) {    
  13.     data[index]= {"id":el,"text":el}; // 组合选中样式数据    
  14. });  
  15.   
  16. // console.log(data);  
  17. $eventSelect3.select2({  
  18.     placeholder: "输入TAG",  
  19.     width: "500",  
  20.     tags: true,         // 将Select2放入“标签'mode  
  21.     separator: ",",     // 分隔符字符或字符串用来划定id  
  22.     multiple: "multiple",  
  23.     multiply: true,     // 是否允许选择多个值  
  24.     data:data,  
  25.     initSelection: function (element, callback) {    
  26.         callback(data);// 默认选中    
  27.     },  
  28.     ajax: {  
  29.         url: "/e/extend/api/index.php?act=getTags",    
  30.         type:"POST",  
  31.         dataType: 'json',   
  32.         delay: 500, 
  33.         data: function (params) {   
  34.             return {   
  35.                 q: params.term,     // 将输入的字符传递到ajax中，q可以改为常用的变量名   
  36.             };   
  37.         }, 
  38.         processResults: function (data, page) {   
  39.             // console.debug("ajax返回的对象是:")   
  40.             // console.debug(data.data) 
  41.             return {   
  42.                 results: data.data   
  43.             };   
  44.         },   
  45.         cache: true   
  46.     },   
  47.     escapeMarkup: function (markup) {    
  48.         // console.debug(markup)   
  49.         return markup;    
  50.     }, // let our custom formatter work   
  51.     minimumInputLength: 1,      // 最小数量的字符后才会去调用ajax   
  52.     maximumInputLength: 20,     // 最大数量的字符后才会去调用ajax   
  53.     minimumResultsForSearch: 1, // 最小数量的结果 
  54.     templateResult: formatRepo3,    
  55.     // templateSelection: formatRepoSelection3 
  56. }).val(dataArr3); 
  57.  
  58. $eventSelect3.on("change", function (e) { 
  59.     var data = '',dataArr = $eventSelect3.select2('data');   
  60.     $.each(dataArr,function(index, el) {   
  61.           data = data.length<1? data += el.text:data += ","+el.text; 
  62.     }); 
  63.     // console.log($eventSelect3.select2('data')); 
  64.     console.log(data); 
  65.     $eventInfo3.val(data); // 获取选择的数据并放到要保存的元素中 
  66. }); 
  67.  
  68. /* 这里函数是用于查询到内容后，显示在select2的下拉框里面 */   
  69. function formatRepo3 (repo) {  //显示在select下拉框中的模板 
  70.     if (repo.loading) return repo.text;   
  71.     var markup = '<span>' + repo.text + '</span>';    
  72.     return markup;    
  73. }    
  74. </script>  

 

 2016.11.7 update

 

关于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

函数

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

 

 

本文来自于：http://www.yoyo88.cn/note/note1/11.html

下载demo (17) 在线演示 (81)
上一篇 帝国CMS实现d/file/与网站分离
下一篇 Ucenter整合CMS和discuz教程
相关的文章
Powered by yoyo苏ICP备15045725号