select.js

这是一个基于原生 javascript 开发的select选择器。
使用模拟的增强下拉选择器来代替浏览器原生的选择器。
选择器支持单选、多选、搜索，以及键盘快捷操作。

select.js github地址 (opens new window)

用法

下面是一些示例，了解这个组件的用法。

基本用法

示例代码

const arr = []
for (let i = 1; i< 10000 ;i++) {
    arr.push({
        id: i,
        text: `头条${i}号`,
        coed: 'SCOSD' + i,
    })
}
const select = new __Select__({
    id: '__Query__',
    data: arr,
    queryKey: 'id'
})

禁用select选择器

示例代码

const arr = []
var arr = [
    {
        id: 0,
        text: '天空1号',
        __disabled__: true
    },
    {
        id: 1,
        text: '天空2号'
    }
]
const select = new __Select__({
    id: '__Query__1',
    data: arr,
    queryKey: 'id'
})

// 禁用
select.$setDisabled(true)

// 取消禁用
select.$setDisabled(false)

可清空

示例代码

const arr = []
for (let i = 1; i< 10000 ;i++) {
    arr.push({
        id: i,
        text: `头条${i}号`,
        coed: 'SCOSD' + i,
    })
}
const select = new __Select__({
    id: '__Query__2',
    data: arr,
    queryKey: 'id',
    clear: true
})

多选

示例代码

const arr = []
for (let i = 1; i< 10000 ;i++) {
    arr.push({
        id: i,
        text: `头条${i}号`,
        coed: 'SCOSD' + i,
    })
}
const select = new __Select__({
    id: '__Query__3',
    data: arr,
    queryKey: 'id',
    clear: true
})

标签集合

示例代码

const arr = []
for (let i = 1; i< 10000 ;i++) {
    arr.push({
        id: i,
        text: `头条${i}号`,
        coed: 'SCOSD' + i,
    })
}
const select = new __Select__({
    id: '__Query__4',
    data: arr,
    queryKey: 'id',
    clear: true
})

示例代码

const arr = []
for (let i = 1; i< 10000 ;i++) {
    arr.push({
        id: i,
        text: `头条${i}号`,
        coed: 'SCOSD' + i,
    })
}
const select = new __Select__({
    id: '__Query__5',
    data: arr,
    queryKey: 'id',
    clear: true,
    maxTagPlaceholder (num) {
        return 'more ' + num
    }
})

获取值与设置值

示例代码

const arr = []
for (let i = 1; i< 10000 ;i++) {
    arr.push({
        id: i,
        text: `头条${i}号`,
        coed: 'SCOSD' + i,
    })
}
const select = new __Select__({
    id: '__Query__6',
    data: arr,
    queryKey: 'id'
})
// 获取值
select.$getVal()

// 设置值
// 单选
select.$setVal(2)

// 多选
select.$setVal([2, 3])

API

属性	说明	类型	默认值
id	绑定的html标签id	String	无(必填)
data	options 数据	Array	[]
slice	针对数据量过多时，截取展示的数据量	Number	50(必填)
placeHolder	input 框的 placeHolder 值	String	请选择
queryKey	options 的 key 值	String	无(必填)
type	单选模式还是多选模式(single 和 multiple)	String	single
maxTagCount	指定最多显示的 tag 数量，超出后折叠。	Number	0
maxTagPlaceholder	自定义 tag 超出后折叠的显示内容。	Function	无
clear	清空模式	Boolean	false

methods

方法名	说明	参数
$getVal	获取选中的值。在单选模式获取的是字符串，多选模式下获取的是数组。	无
$setVal	对select选择器设置值。在单选模式需要设置的是字符串，多选模式下需要设置的是数组。	[String, Number 等]
$getVallabel	获取选中的值的项信息。在单选模式获取的是对象，多选模式下获取的是数组。	无
$setDisabled	禁用整个选择器。	true or false

Features

• 远程搜索
• 添加目录
• 虚拟列表

Logs

• 2020/9/28

  1.修复按上下键 foucs 进入不可见区域时滚动条不跟着滚动

  2.修复创建多个实例时，style 标签重复创建