Select2 4.0.5 API

Select2 4.0.5 API

详细属性参考官方API,https://github.com/select2/select2/releases/tag/4.0.5
注:4.0.5版本API与3.x版本有差异,有些属性已废弃,以下列出常用属性及其参考值:

1、API

属性 类型 默认值 描述
data Array of objects Null 数据集合,基础数据格式{id:””, text:””, selected: true/选中/, disabled: true/失效/}
width string “” 宽度
style string “” 样式
ajax object null Ajax请求数据
minimumResultsForSearch Integer null 设置支持搜索的最小集合,设置为负数,隐藏搜索框
minimumInputLength Integer   输入指定长度字符后开始搜索
multiple boolean False 是否多选,默认单选
maximumSelectionSize Integer   支持最大的选择数量,int/function
maximumInputLength Integer   支持搜索的最大字符数
placeholder String “” 选择提示
allowClear Boolean false 是否显示清除按钮,只有设置了placeholder才有效
closeOnSelect Boolean true 是否选中后关闭选择框,默认true
templateSelection callback   选中项样式
templateResult callback   选项样式
matcher callback   过滤选项集合
sorter callback   选项结果集排序
theme String   主题,可以设置bootstrap主题
tags Boolean   是否可动态创建选项
tokenSeparators Aray   输入时使用分隔符创建新选项
createTag callback   创建新标签
insertTag callback   在选项集合后插入标签
disabled boolean false 是否失效
debug boolean false 是否开启debug

注:initSelection 和query已废弃

2、定义组件Select2

/**
 * 创建select2基础组件
 */
 select2: function(selector, option, allDefault){
      if(allDefault){
          $(selector).select2(option);
      }else{
          $(selector).select2($.extend(true, {}, defaultOption, option));
      }
  }

3、测试用例

html(省略)

js

require(["jquery", "js/component/Select2"], function($, Select2){
     $(document).ready(function(){
    var data = [{id:"1", text:"测试1"}, {id:"2", text:"测试2"}];
     var format = function(data){
     return $("" + data.text+ "111" + "");
     }
     // 基本搜索
     Select2.select2("#select", {data: data});
     // 无搜索框
     Select2.select2("#noSearchSelect", {data: data, minimumResultsForSearch: -1});
            // 多选
            Select2.select2("#multiSelect", {data: data, multiple: true});
            // 最多输入的字符数
            Select2.select2("#maxInput", {data: data, maximumInputLength: 2});
            // 显示清除按钮
            Select2.select2("#allowClear", {data: data, placeholder: "123", allowClear: true});
            // 格式化选项
            Select2.select2("#formatSection", {data: data, templateSelection: format,
                templateResult: format});
            // ajax请求数据
            Select2.select2("#ajaxSelect", {width:"50%",  ajax: {
                url: 'https://api.github.com/orgs/select2/repos',
                data: function (params) {
                  var query = {
                    search: params.term,
                    type: 'public'
                  }
                  return query;
                }
            }}, true);
            // ajax分页,官方例子,没有出现分页情况,后续用到时具体测试(2018.8.31)
            Select2.select2("#ajaxPagination", {
                width: "50%",
                ajax: {
                    url: "https://api.github.com/search/repositories",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                      return {
                        q: params.term, // search term
                        page: params.page
                      };
                    },
                    processResults: function (data, params) {
                      // parse the results into the format expected by Select2
                      // since we are using custom formatting functions we do not need to
                      // alter the remote JSON data, except to indicate that infinite
                      // scrolling can be used
                      params.page = params.page || 1;

                      return {
                        results: data.items,
                        pagination: {
                          more: (params.page * 30) < data.total_count
                        }
                      };
                    },
                    cache: true
                  },
              placeholder: 'Search for a repository',
              escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
              minimumInputLength: 1
            }, true);
            
            // 动态创建新选项
            Select2.select2("#dynamicOption", {width:"50%", data:data, tags:true}, true);
            
        });
    });

链接:https://www.jianshu.com/p/778e9f21fc3d

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

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

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

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

(0)


相关推荐

  • linux下svn命令使用大全

    最近经常使用svn进行代码管理,这些命令老是记不住,得经常上网查,终于找了一个linux下svn命令使用大全:1、将文件checkout到本地目录 svncheckoutpath(path是服务器 上的目录)例如:svncheckoutsvn://192.168.1.1/pro/domain简写:svnco2、往版本库中添加新的文件 svnaddfile例如:svn…

  • laravel 在nginx服务器上除了首页其余都是404的问题

    laravel 在nginx服务器上除了首页其余都是404的问题

    2021年10月27日
  • PHP文件锁

    PHP文件锁一、文件锁是什么?    顾名思义,对文件上锁。    可以通过“进门”的实际情况来理解:    有多个人要通过一个大门到食堂里吃饭,但食堂只有一个座位。     食堂管理员A有点偷懒,不想等那么久,于是就告诉大家,中午都可以来食堂吃饭,但是要跑快点才行,只有一个座位,第一个到的人就可以在食堂吃饭,然后就会锁门,其他人看到门锁上了就哪来的回哪去吧,这…

  • Laravel数据库操作的三种方式

    Laravel数据库操作的三种方式

    2021年10月26日
  • Oracle number数据类型的使用[通俗易懂]

    Oracle number数据类型的使用[通俗易懂]需要首先明白有效位的含义:从左到右,从第一个不为零的数开始计数第一种情况:number后面都是两个正数,第一个数表示有效位,第二个数表示小数点后的位数(也就是精确度,需要进行四舍五入)例如number(2,1)存入的数据有1,0.1,1.666分析过程:存入1:要求有效位小于等于2,所以自动补充0,存入1实际上判断的是1.0是否符合条件,自然可以添加存入0….

  • jQuery实现方式不一样的跳转到底部

    jQuery跳转到页面底部效果在线体验:http://hovertree.com/texiao/jquery/9.htm以下是完整HTML代码:跳到底部jquery效果-何问起跳到底部效果

    2021年12月21日

发表回复

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

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