select下拉搜索（Select2数据量大时卡顿问题）

mr_cmx

已于 2022-07-23 22:48:03 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

于 2022-07-22 11:30:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44646763/article/details/125928447

场景：之前遇到一个前后端一体的老项目使用了Select2，select下的数据都是通过 controllers 一次性带过来的。后面数据量变大后，Select2切换选项时就会出现严重的卡顿问题

可能有人会说，使用分页加载不就行了。但我尝试后发现加载到一定数据量后，切换选项同样会出现问题

最后决定放弃使用Select2，自己写个 select下拉搜索

文件链接：https://download.youkuaiyun.com/download/weixin_44646763/86247616

gitHub链接： https://github.com/1499610503/search_select

因为代码中使用了jq 所以引入search_select.js 前需先引入 jq

也不要忘了引入search_select.css

使用方法：

var ss1 = new SearchSelect('#text_search_select',{placeholder:'输入搜索内容'})

第一个参数为目标select元素的 css选择器，placeholder不传时默认为空
placeholder为搜索input 的 placeholder值

可给select添加额外的项:

            ss1.addSelectOption([{
                value: 5,
                text: 'option5'
            }, {
                value: 6,
                text: 'option6'
            }, {
                value: 7,
                text: 'option7'
            }, {
                value: 8,
                text: 'option8'
            }, ])