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);
            
        });
    });

你可能感兴趣的:(Select2 4.0.5 API)