TinySelect

<link rel="stylesheet" type="text/css" href="dist/tinyselect.min.css" />
<script type="text/javascript" src="dist/tinyselect.min.js" />

<div id="tinyselectcontext"></div>

<select id="tinyselectcontext">
    <optgroup label="1-2">
        <option>1</option>
        <option value="2">二</option>
    </optgroup>
    <optgroup label="3-5">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="伍">五</option>
    </optgroup>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

var data = [{
    "id": 0,
    "text": "一月"
    }, {
        "id": 1,
        "text": "二月"
    }, {
        "id": 2,
        "text": "三月"
    }, {
        "id": 3,
        "text": "四月"
    }, {
        "id": 4,
        "text": "五月"
    }, {
        "id": 5,
        "text": "六月"
    }, {
        "id": 6,
        "text": "七月"
    }, {
        "id": 7,
        "text": "八月"
    }, {
        "id": 8,
        "text": "九月"
    }, {
        "id": 9,
        "text": "十月"
    }, {
        "id": 10,
        "text": "十一月"
    }, {
        "id": 11,
        "text": "十二月"
}];

var ts = tinyselect('#tinyselectcontext', data);

var ts = tinyselect('#tinyselectcontext', data, true);

var ts = tinyselect('#tinyselectcontext', {
    css: 'custom-select-style',
    style:{
        width: 400
    },
    item:{
        data: data,
        render: function(data, index){
            return (index + 1) + ':' + data.text;
        }
    }
});

var option = {
    // 组件初始化完成后，可用时的回调(由`ready`事件变化而来)，其上下文对象指向实例的`this`对象
    ready: null,
    // 组件是否是只读的
    readonly: false,
    // 显示模式，可以设置的值为： dropdown(默认下拉模式), list(列表模式), popup(弹出模式)
    mode: 'dropdown',
    // 是否支持键盘操作，默认为 true
    keyboard: true,
    // 附加的样式类名称
    css: null,
    // 下拉框容器的样式
    style: {
        // 这个行高是必须的，覆盖这些样式时，需要注意，
        // 其值需要是可以转换成整数的类型，因为下拉的项会使用这个作为默认的行高
        // 例外的情况：设置了项的行高(即下面的 item.line-height)
        lineHeight: '28px'
    },
    // 获取远程数据的选项
    ajax:{
        // 获取远程数据的地址
        // 设置了此参数即表示需要从远程加载数据
        url: null,
        // 请求的method
        type: 'get',
        // 请求的参数，可以是对象，字符串(q=v&q=v&q=v)或函数
        // 是对象或字符串时，一般是固定参数
        // 是函数时，用于动态设置参数，过滤框的输入会作为参数传入，返回值将作为请求的参数
        param: null,
        // 过滤数据时，传给后台的关键字参数名称
        // 留空时表示过滤时不从远程重新查询数据
        key: null,
        // 关键字的编码器，当需要传输中文或特殊字符时，参数会被这个编码器编码后再进行传输
        // 这是一个函数，其参数是过滤框内的输入
        // 可以使用浏览器内置的 encodeURI或encodeURIComponent，
        // 当然也可以使用自己写的或第三方诸如 Base64.encode 类的函数
        encoder: NULL,
        // 对请求的预处理函数，其参数为jQuery的ajax选项对象，返回false以阻止查询
        req: null,
        // 对返回数据的处理函数，其参数为: (data, status, xhr)，其返回值将作为组件的数据被加载
        res: null,
        // 是否在初始化时发送请求加载数据
        auto: true
    },
    // 下拉框的头部
    header: {
        // 头部渲染器，其this上下文就是其DOM对象，
        // 直接操作这个对象来改变头部
        // 这个是在执行完其初始化，添加到容器前调用的
        render: false,
        // 过滤框
        filter: {
            // 触发过滤的动作，可以设置为 change 或 enter(默认)。
            // 为change时，输入有变化时执行
            // 为enter时，按下回车时执行
            trigger: 'enter',
            // 此值表示在输入框经过指定时间后没有键盘输入时，触发过滤动作
            // 单位是毫秒，默认值为 618
            // 当 trigger 为change时有效
            // 设置这个是为了防止使用亚洲输入法时（比如：中文，日文等）时，文字输入中将字母上屏导致的事件触发
            delay: 618,
            // 过滤框的提示文字
            placeholder: '输入后按回车过滤',
            // 过滤时是否区分大小写，默认为 false
            matchCase: false,
            // 过滤框支持输入的最大长度
            maxlength: 32,
            // 附加的样式类名称
            css: null,
            // 过滤框的样式
            style: {}
        },
        // 附加的样式类名称
        css: null,
        // 头部样式
        style: {}
    },
    // 下拉项容器
    box: {
        // 下拉列表没有数据时显示的文字
        empty: '没有数据',
        // 数据项的布局方式
        // 可设置的值有： list(列表布局，默认值), grid(网格布局), table(表格布局)
        layout: layout_list,
        // 附加的样式类名称
        css: null,
        // 下拉项容器的样式
        style: {},
        // 当layout为表格布局时，列的定义
        columns: null
    },
    // 数据项分组设置
    group: {
        // 分组值字段
        // 设置此值时才会分组
        valueField: false,
        // 分组文本字段，不设置时使用 valueField
        // 相同的 valueField 而 textField不同时，只会取第一个 textField的值
        textField: false,
        // 数据项不包含指定的 valueField字段时的分组名称
        unknown: '未分组',
        // 分组的渲染器
        render: false,
        // 附加的样式类名称
        css: null,
        // 下拉项容器的样式
        style: {}
    },
    // 下拉项
    item: {
        // 下拉项数据的数组，每一项需要对象结构的数据
        data: [],
        // 默认选中的项
        value: false,
        // 数据对象的值字段，在获取/设置值时，会使用这个字段
        valueField: 'id',
        // 数据对象的文本字段，下拉项的显示文字
        textField: 'text',
        // 可见项的数量，数据数量多余此值时出现滚动条
        visible: 5,
        // 下拉项的渲染器，使用返回值设置项的内容
        // render: function(itemdata, index, alldata){}  this 指向即将渲染的网页元素对象。
        // itemdata:这一项的数据 
        // index: 这一项数据的索引
        // alldata:下拉的所有数据
        // 设置为false 禁用渲染器
        render: false,
        // 是否在数据项比设定的 visible 多时使用异步渲染(true)，
        // 在数据较多时建议设置为true，以避免大量的dom操作阻塞页面执行
        async: true,
        // 附加的样式类名称
        css: null,
        // 每一个下拉项的样式
        style: {}
    },
    // 下拉底部DOM
    footer: {
        // 底部渲染器，其this上下文就是其DOM对象，
        // 直接操作这个对象来改变底部
        // 需要注意的是，底部分了“左”、“右”两个区域，以放置不同的东西
        // 这个是在执行完其初始化，添加到容器前调用的
        render: false,
        /**
         * 下拉项数量
         */
        totalTpl: '共' + str_placeholder + '项',
        /**
         * 选中的下拉项数据
         */
        selectedTpl: '选中' + str_placeholder + '项/',
        // 附加的样式类名称
        css: null,
        // 底部的样式
        style: {}
    },
    result: {
        // 是否启用多选模式
        multi: false,
        // 是否显示下拉指示器
        // false    始终不显示
        // true     始终显示
        // null     单选时显示  多选时不显示
        arrow: null, 
        // 当从select创建实例时，是否需要将TinySelect的选中值同步到select上，默认为 true
        sync: true,
        // 选中结果框的渲染器，可以通过这个来改变选中结果框的渲染
        render: false,
        // 多选结果展示方式，可以设置为 0（显示选中的数量，默认值） 或者 1（显示 选中的项列表）
        // 这是一个预留配置项
        type: 0,
        // 多选结果框附加的样式类名称
        css: null,
        // 多选结果框的样式
        style: {},
        // 多选结果选项
        item:{            
            // 选中结果的渲染器，可以通过这个来改变选中结果的渲染
            // 上下文指`this`向下拉组件
            render: false,
            // 结果项的样式
            style: null,
            // 附加的样式类名称
            css: null
        }
    }
}

var option = {
    box:{
        layout: 'table',
        columns: [{
            type: 'index',
            width: 40,
            align: 'center'
        }, {
            field: 'name',
            width: 120,
            style:{
                color: 'red'
            },
            css: 'name-css',
            render: function(val){
                var info = this;
                return val;
            }
        }, {
            type: 'status',
            width: 40
        }]
    }
}

e = {
    data: Object,
    index: Number,
    target: HtmlElement,
    type: String
}

yarn dev

npx grunt watch