Jquery.slwy.selector NPM

Slwy.Selector

Slwy简易选择列表插件

Slwy.Selector

使用

绑定元素为`<input>`时

截图

示例代码：

    <input type="text" class="demo-input" placeholder="选填（中文/代码）">

    $('input.demo-input').SlwySelector({
        title: '支持中文|代码搜索',//自定义标题
        titleBar: true,//是否显示标题栏
        data: data,//自定义数据
        showField: 'CarrierName',//需要展示的自定义数据字段名
        showRight: true,//是否显示右侧字段
        showRightField: 'CarrierCode',//需要展示的右侧自定义数据字段名
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })
    //选择事件
    /*.on('selected', function (e) {
        console.log(e.value)
    })*/

绑定元素为`<select>`时

截图

示例代码：

    <select name="select" class="demo-select">
        <option value="CA" data-right="CA" disabled>中国国际航空</option>
        <option value="MU" data-right="MU">东方航空</option>
        <option value="CZ">南方航空</option>
        <option value="FM" disabled>上海航空</option>
    </select>

    $('select.demo-select').SlwySelector({
        showRight: true,//是否显示右侧字段
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })
    //选择事件
    /*.on('selected', function (e) {
        console.log(e.value)
    })*/

使用自定义数据

示例代码：

    <select name="select" class="demo-select-optgroup-data">
    </select>

    //自定义data
    [
        {
            "KeyID": 0,
            "CarrierCode": "HU",
            "CarrierShortName": "海南航空",
            "CarrierName": "海南航空",
            "SettleCode": "0",
            "CountryType": 0,
            "CountryTypeName": "国内",
            "IsDelete": 0,
            "AddTime": "0001-01-01T00:00:00",
            "AddUser": "",
            "ModifyUser": ""
        },
        ...
    ]

    $('select.demo-select-data').SlwySelector({
        data: data,//自定义数据
        showField: 'CarrierName',//需要展示的自定义数据字段名
        showRight: true,//是否显示右侧字段
        showRightField: 'CarrierCode',//需要展示的右侧自定义数据字段名
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })
    //选择事件
    /*.on('selected', function (e) {
        console.log(e.value)
    })*/

若同时存在<option></option>与自定义data，优先使用data

绑定有`optgroup`的`<select>`时

截图

示例代码：

    <select name="select" class="demo-select-optgroup">
        <optgroup label="国内航空公司">
            <option value="CA" data-right="CA" disabled>中国国际航空</option>
            <option value="MU" data-right="MU">东方航空</option>
            <option value="CZ">南方航空</option>
            <option value="FM" disabled>上海航空</option>
        </optgroup>
        <optgroup label="国外航空公司">
            <option value="IR" data-right="IR">伊朗航空公司</option>
            <option value="IT" data-right="IT">法国国内航空公司</option>
            <option value="J2" data-right="J2">阿塞拜疆航空公司</option>
        </optgroup>
    </select>

    $('select.demo-select-optgroup').SlwySelector({
        showRight: true,//是否显示右侧字段
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })
    //选择事件
    /*.on('selected', function (e) {
        console.log(e.value)
    })*/

使用自定义数据

示例代码：

    <select name="select" class="demo-select-optgroup-data">
    </select>

    //自定义data
    [
        {
            "label": "国内航空公司",
            "optgroup": true,
            "options": [
                {
                    "KeyID": 0,
                    "CarrierCode": "HU",
                    "CarrierShortName": "海南航空",
                    "CarrierName": "海南航空",
                    "SettleCode": "0",
                    "CountryType": 0,
                    "CountryTypeName": "国内",
                    "IsDelete": 0,
                    "AddTime": "0001-01-01T00:00:00",
                    "AddUser": "",
                    "ModifyUser": ""
                },
                ...
            ]
        },
        {
            "label": "国际航空公司",
            "optgroup": true,
            "options": [
                {
                    "KeyID": 0,
                    "CarrierCode": "AJ",
                    "CarrierShortName": "比利时空运公司",
                    "CarrierName": "比利时空运公司",
                    "SettleCode": "0",
                    "CountryType": 1,
                    "CountryTypeName": "国际",
                    "IsDelete": 0,
                    "AddTime": "0001-01-01T00:00:00",
                    "AddUser": "",
                    "ModifyUser": ""
                },
                ...
            ]
        }
    ]

    //JS
    $('select.demo-select-optgroup-data').SlwySelector({
        data: data,//自定义数据
        showField: 'CarrierName',//需要展示的自定义数据字段名
        showRight: true,//是否显示右侧字段
        showRightField: 'CarrierCode',//需要展示的右侧自定义数据字段名
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })
    //选择事件
    /*.on('selected', function (e) {
        console.log(e.value)
    })*/

若同时存在<option></option>与自定义data，优先使用data

多选`<select>`与自定义输入

多选<select>

截图

示例代码：

    <select name="select" class="demo-select-multiple" multiple>
        <option value="CA" data-right="CA" disabled>中国国际航空</option>
        <option value="MU" data-right="MU">东方航空</option>
        <option value="CZ">南方航空</option>
        <option value="FM">上海航空</option>
        <option value="FM">Joe</option>
    </select>

    $('select.demo-select-multiple').SlwySelector({
        searchShowEmpty: false,
        multipleMaxCount: 9,
    })

不带自定义输入的多选select输入时只会搜索列表。Backspace后退键可删除选中元素

带自定义输入的多选<select>

截图

示例代码：

    <select name="select" class="demo-select-multiple-custom" multiple>
        <option value="CA" data-right="CA" disabled>中国国际航空</option>
        <option value="MU" data-right="MU">东方航空</option>
        <option value="CZ">南方航空</option>
        <option value="FM">上海航空</option>
        <option value="FM">Joe</option>
    </select>

    $('select.demo-select-multiple-custom').SlwySelector({
        multipleInputCustom: true,
        searchShowEmpty: false,
        multipleMaxCount: 9,
        multipleInputSeparator:[';', '；', ',']
    })

自定义输入时默认以中英文分号;，；完成输入，可通过修改选项multipleInputSeparator自定义分隔完成符。完成后的元素将被选中并添加到下拉列表中。

其他

自定义宽度

示例代码：

    <select name="select" class="demo-other-width">
        <option value="CA" data-right="CA" disabled>中国国际航空</option>
        <option value="MU" data-right="MU">东方航空</option>
        <option value="CZ">南方航空</option>
        <option value="FM" disabled>上海航空</option>
    </select>

    $('select.demo-other-width').SlwySelector({
        showRight: true,//是否显示右侧字段
        width: 300,
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })

自定义每页显示数量

截图：

示例代码：

    <select name="select" class="demo-other-viewCount">
    </select>

    $('select.demo-other-viewCount').SlwySelector({
        data: data,//自定义数据
        showField: 'CarrierName',//需要展示的自定义数据字段名
        showRight: true,//是否显示右侧字段
        showRightField: 'CarrierCode',//需要展示的右侧自定义数据字段名
        viewCount: 15,//每页显示数量
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })

自定义搜索字段

示例代码：

    <select name="select" class="demo-other-searchField">
    </select>

    $('select.demo-other-searchField').SlwySelector({
        data: data,//自定义数据
        showField: 'CarrierName',//需要展示的自定义数据字段名
        search: true,//是否显示搜索
        searchField: ['CarrierCode'],
        searchPlaceholder: '搜索航空公司'//搜索栏placeholder
    })

列表下显示的数据字段默认可被搜索，且不可更改，所以searchField声明的字段名并不会替换默认的搜索字段。

展开不自动聚焦到搜索框

默认情况下展开列表会自动聚焦搜索字段，可修改searchAutoFocus使其不聚焦

    <select name="select" class="demo-other-searchField">
    </select>

    $('select.demo-other-notSearchAutoFocus').SlwySelector({
        data: data,//自定义数据
        showField: 'CarrierName',//需要展示的自定义数据字段名
        search: true,//是否显示搜索
        searchPlaceholder: '搜索航空公司',//搜索栏placeholder
        searchAutoFocus: false
    })

选项

titleBar 展示标题栏

类型： Boolean
默认： false
值：true || false

是否展示下拉列表标题栏

title 标题内容

类型： String
默认： 支持中文搜索

展示标题栏时的标题内容

data 自定义数据

类型： Array
默认： []

使用自定义的数据（接口返回的json数据）代替<option>，自定义数据格式参考自定义数据说明

showField 自定义数据展示字段名

类型： String
默认： ''

需要展示的自定义数据字段名，传入自定义数据data后有效

showRightField 自定义数据右侧展示字段名

类型： String
默认： ''

需要展示的右侧自定义数据字段名，传入自定义数据data后有效

showRight 展示右侧字段

类型： Boolean
默认： false
值：true || false

是否展示右侧字段，传入自定义数据时展示showRightField对应的字段，若是传统的<option>形式则展示属性data-right，如<option value="MU" data-right="MU">东方航空</option>

search 展示搜索

类型： Boolean
默认： false
值：true || false

是否展示搜索框，默认列表下所有已展示的字段可被搜索

searchPlaceholder 搜索框placeholder

类型： String
默认： '搜索'

搜索框placeholder，前提已开启搜索

searchField 被搜索字段

类型： Array
默认： []

自定义被搜索的字段，将与列表已展示的字段合并，用于自定义数据下

searchShowEmpty 搜索无结果提示

类型： Boolean
默认： true
值：true || false

搜索时若无结果显示对应提示

searchAutoFocus 自动聚焦搜索框

类型： Boolean
默认： true
值：true || false

启用后展开下拉列表会自动聚焦搜索框

viewCount 每页展示数量

类型： Number
默认： 10

自定义下拉列表默认显示数量，类似于设置高度

width 宽度

类型： Number
默认： null

自定义宽度

multipleInputCustom 多选下自定义输入

类型： Boolean
默认： false
值：true || false

多选下是否允许自定义输入，只能在绑定元素为<select>且为multiple多选的情况下可用

multipleInputSeparator 多选下分隔完成符

类型： Array
默认： [';', '；']

自定义多选下输入后的分隔完成符，默认可使用中英文分号;，；完成输入并添加到列表。只能在绑定元素为<select>且为multiple多选的情况下可用

multipleInputMaxLength 多选下自定义输入长度

类型： Number
默认： 30

多选下自定义输入时的最大输入长度。只能在绑定元素为<select>且为multiple多选的情况下可用

multipleMaxCount 多选下最大选择数量

类型： Number
默认： null

自定多选下最大可选择的数量

multipleMaxCountTips 多选下最大选择数量提示

类型： String
默认： '只能选择{n}个!'

超过最大可选数量时的提示内容，其中{n}指代multipleMaxCount数量

skin 皮肤

类型： String
默认： ''

暂为提供自带的更多皮肤选择，目前等同于添加自定义类名，然后自由替换默认样式

select 回调函数

类型： Function
默认： callback(data)

下拉选择后的回调函数

也可通过为绑定的input元素使用.on监听selected事件

自定义数据说明

当列表的数据量过大，或是从接口请求的数据，此时可使用自定义数据。自定义数据传入的实际上就是一个对象数组，除了部分预留的关键字字段名，对对象的其他字段名没有要求，格式如下：

    [
        {
            "KeyID": 0,
            "CarrierCode": "HU",
            "CarrierShortName": "海南航空",
            "CarrierName": "海南航空",
            "SettleCode": "0",
            "CountryType": 0,
            "CountryTypeName": "国内",
            "IsDelete": 0,
            "AddTime": "0001-01-01T00:00:00",
            "AddUser": "",
            "ModifyUser": "",
            ...
            //预留字段（首字母大小写皆可）
            "Disabled": true, // 禁用，不可选
            "Selected": true // 默认选中

        }
        ...
    ]

当带有optgroup时的数据格式

    [
        {
            //预留字段
            "label": "国内航空公司", //optgroup标签名
            "optgroup": true, //是否是optgroup
            "options": [ //optgroup下的option列表
                {
                    "KeyID": 0,
                    "CarrierCode": "HU",
                    "CarrierShortName": "海南航空",
                    "CarrierName": "海南航空",
                    "SettleCode": "0",
                    "CountryType": 0,
                    "CountryTypeName": "国内",
                    "IsDelete": 0,
                    "AddTime": "0001-01-01T00:00:00",
                    "AddUser": "",
                    "ModifyUser": "",
                    ...
                    //预留字段（首字母大小写皆可）
                    "Disabled": true, // 禁用，不可选
                    "Selected": true // 默认选中
                }
            ]
        }
    ]

事件

selected事件 {docsify-ignore}

当列表被选择时，将触发selected事件

$('#date')
    .SlwyCalendar({
        ...
    })
    .on('selected', function(e){
        //当前被选择的数据对象
        console.log(e.value)
    })

同样也可以传入选项select来触发事件

selector chosen select

@everything-registry/sub-chunk-1973 @zalastax/nolb-jquery_

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

Slwy.Selector

使用

绑定元素为<input>时

绑定元素为<select>时

绑定有optgroup的<select>时

多选<select>与自定义输入

其他

自定义宽度

自定义每页显示数量

自定义搜索字段

展开不自动聚焦到搜索框

选项

titleBar 展示标题栏

title 标题内容

data 自定义数据

showField 自定义数据展示字段名

showRightField 自定义数据右侧展示字段名

showRight 展示右侧字段

search 展示搜索

searchPlaceholder 搜索框placeholder

searchField 被搜索字段

searchShowEmpty 搜索无结果提示

searchAutoFocus 自动聚焦搜索框

viewCount 每页展示数量

width 宽度

multipleInputCustom 多选下自定义输入

multipleInputSeparator 多选下分隔完成符

multipleInputMaxLength 多选下自定义输入长度

multipleMaxCount 多选下最大选择数量

multipleMaxCountTips 多选下最大选择数量提示

skin 皮肤

select 回调函数

自定义数据说明

事件

selected事件 {docsify-ignore}

绑定元素为`<input>`时

绑定元素为`<select>`时

绑定有`optgroup`的`<select>`时

多选`<select>`与自定义输入