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

爱被打了一巴掌 2021-07-26 21:46 1040阅读 0赞

最近项目中有个需求是商品能够选择多个标签，类似jire中选择标签：  
![这里写图片描述][20180213170257774]

能把选择后选项显示在输入框中，删除时连同整个标签一起删。经过网上咨询、请教同事后，得到一致意见是使用`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，经过上面三步后的效果：  
![这里写图片描述][20180213170350699]

下表是`select2`常用的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Width</td> 
   <td>字符串</td> 
   <td>控制 宽度 样式属性的Select2容器div</td> 
  </tr> 
  <tr> 
   <td>minimumInputLength</td> 
   <td>int</td> 
   <td>最小数量的字符</td> 
  </tr> 
  <tr> 
   <td>maximumInputLength</td> 
   <td>int</td> 
   <td>最大数量的字符</td> 
  </tr> 
  <tr> 
   <td>minimumResultsForSearch</td> 
   <td>Int</td> 
   <td>最小数量的结果</td> 
  </tr> 
  <tr> 
   <td>maximumSelectionSize</td> 
   <td>int</td> 
   <td>可选择的最大条目数</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>字符串</td> 
   <td>选择初始值</td> 
  </tr> 
  <tr> 
   <td>separator</td> 
   <td>字符串</td> 
   <td>分隔符字符或字符串用来划定id</td> 
  </tr> 
  <tr> 
   <td>allowClear</td> 
   <td>布尔</td> 
   <td>此选项只指定占位符</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>布尔</td> 
   <td>Select2是否允许选择多个值</td> 
  </tr> 
  <tr> 
   <td>openOnEnter</td> 
   <td>&nbsp;</td> 
   <td>打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>函数</td> 
   <td>函数用于获取id从选择对象或字符串id存储代表的关键</td> 
  </tr> 
  <tr> 
   <td>matcher</td> 
   <td>函数</td> 
   <td>用于确定是否搜索词匹配一个选项时使用一个内置的查询功能</td> 
  </tr> 
  <tr> 
   <td>sortResults</td> 
   <td>函数</td> 
   <td>用于排序列表搜索之前显示的结果。</td> 
  </tr> 
  <tr> 
   <td>formatSelection</td> 
   <td>函数</td> 
   <td>函数用于呈现当前的选择</td> 
  </tr> 
  <tr> 
   <td>formatResult</td> 
   <td>函数</td> 
   <td>函数用来渲染结果,</td> 
  </tr> 
  <tr> 
   <td>formatResultCssClass</td> 
   <td>函数</td> 
   <td>函数用于添加css类结果元素</td> 
  </tr> 
  <tr> 
   <td>formatNoMatches</td> 
   <td>字符串/函数</td> 
   <td>字符串包含“不匹配”消息,或</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>函数用于呈现信息</td> 
  </tr> 
  <tr> 
   <td>formatSearching</td> 
   <td>字符串/函数</td> 
   <td>字符串包含“搜索… “消息,或</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>函数用于呈现显示的消息 正在进行搜索。</td> 
  </tr> 
  <tr> 
   <td>formatAjaxError</td> 
   <td>字符串/函数</td> 
   <td>字符串包含消息“加载失败”,或</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>函数用于呈现信息</td> 
  </tr> 
  <tr> 
   <td>formatInputTooShort</td> 
   <td>字符串/函数</td> 
   <td>包含“搜索”输入太短消息的字符串,或</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>函数用于呈现信息。</td> 
  </tr> 
  <tr> 
   <td>formatInputTooLong</td> 
   <td>字符串/函数</td> 
   <td>包含“搜索”输入太短消息的字符串,或</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>函数用于呈现信息</td> 
  </tr> 
  <tr> 
   <td>formatInputTooLong</td> 
   <td>字符串/函数</td> 
   <td>包含“搜索输入字符串太长”消息,或</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>函数用于呈现信息。</td> 
  </tr> 
  <tr> 
   <td>formatSelectionTooBig</td> 
   <td>字符串/函数</td> 
   <td>字符串包含“你不能选择任何更多的选择”消息,或</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>函数用于呈现信息</td> 
  </tr> 
  <tr> 
   <td>formatLoadMore</td> 
   <td>字符串/函数</td> 
   <td>字符串/函数</td> 
  </tr> 
  <tr> 
   <td>createSearchChoice</td> 
   <td>函数</td> 
   <td>创建一个新的可选选择从用户的搜索词。 允许创建通过查询选择不可用 功能。 有用的用户可以创建动态的选择时,如“标签”usecase。</td> 
  </tr> 
  <tr> 
   <td>createSearchChoicePosition</td> 
   <td>函数/字符串</td> 
   <td>定义的位置插入元素</td> 
  </tr> 
  <tr> 
   <td>initSelection</td> 
   <td>函数</td> 
   <td>调用Select2创建允许用户初始化选择的值 select2附加到元素</td> 
  </tr> 
  <tr> 
   <td>tokenizer</td> 
   <td>函数</td> 
   <td>记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。</td> 
  </tr> 
  <tr> 
   <td>tokenSeparators</td> 
   <td>函数</td> 
   <td>一个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [‘,’,’ ‘] 。</td> 
  </tr> 
  <tr> 
   <td>query</td> 
   <td>函数</td> 
   <td>函数用于搜索词的查询结果。</td> 
  </tr> 
  <tr> 
   <td>ajax</td> 
   <td>对象</td> 
   <td>选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级的特性,比如节流和无序的反应。</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>数组/对象</td> 
   <td>择建在查询功能,使用数组。</td> 
  </tr> 
  <tr> 
   <td>tags</td> 
   <td>数组/函数</td> 
   <td>将Select2放入“标签’mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。</td> 
  </tr> 
  <tr> 
   <td>containerCss</td> 
   <td>函数/对象</td> 
   <td>内联css将被添加到select2的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。</td> 
  </tr> 
  <tr> 
   <td>containerCssClass</td> 
   <td>函数/字符串</td> 
   <td>Css类将被添加到select2容器的标签。</td> 
  </tr> 
  <tr> 
   <td>dropdownCss</td> 
   <td>函数/对象</td> 
   <td>内联css将被添加到select2下拉的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。</td> 
  </tr> 
  <tr> 
   <td>dropdownCssClass</td> 
   <td>函数/字符串</td> 
   <td>Css类将被添加到select2下拉的容器。</td> 
  </tr> 
  <tr> 
   <td>dropdownAutoWidth</td> 
   <td>布尔</td> 
   <td>当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。</td> 
  </tr> 
  <tr> 
   <td>adaptContainerCssClass</td> 
   <td>函数</td> 
   <td>过滤器/重命名的css类,因为他们被复制从源标签select2容器标签</td> 
  </tr> 
  <tr> 
   <td>adaptDropdownCssClass</td> 
   <td>函数</td> 
   <td>滤器/重命名的css类,因为他们被复制从源标签select2拉标签</td> 
  </tr> 
  <tr> 
   <td>escapeMarkup</td> 
   <td>函数</td> 
   <td>函数用于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防止javascript注入。</td> 
  </tr> 
  <tr> 
   <td>selectOnBlur</td> 
   <td>布尔</td> 
   <td>设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。</td> 
  </tr> 
  <tr> 
   <td>loadMorePadding</td> 
   <td>整数</td> 
   <td>定义了多少像素需要加载下一页前折以下。 默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。 这个选项可以用来触发加载更快,可能导致更流畅的用户体验。</td> 
  </tr> 
  <tr> 
   <td>nextSearchTerm</td> 
   <td>函数</td> 
   <td>函数用于确定下一个搜索词应该是什么</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## Select2.js点击清除，清除原来的值 ##

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

[20180213170257774]: /images/20210726/ad53d902f54f40bc952a519c5ac0bedc.png
[20180213170350699]: /images/20210726/fd7e3e3e64234fd983ea6302ffc50307.png