Select2 4.0.5 API

全栈程序员-站长 • 2021年11月9日上午8:00 • 未分类 • 阅读 53

详细属性参考官方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（省略）

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/112366.html原文链接：https://javaforall.net