多选搜索下拉框JavaScript组件
带搜索功能的多选下拉框,真的是前端开发里挺常见又挺实用的一个组件了。尤其当你要展示一大堆选项时,不让用户眼花缭乱,体验上立马加分。
搜索的下拉框,就是让用户输入点内容就能快速筛选选项,不用死命往下翻。用原生其实也能做,但扩展性一般,得配合点 JavaScript。比如 Select2 插件,开箱就能用,样式也还挺美观,兼容性也不错。
支持多选这一块,有时候你项目里一个字段就要选一堆值,比如用户标签、兴趣分类这类。原生虽然也能搞,但体验一般,尤其跟搜索搭配起来就有点捉襟见肘了。这时候可以考虑用 bootstrap-select 或者自己用 Vue、React 搞一个自定义组件。
实现原理也不难,大致思路是:
- 你需要有个选项列表,数组就行,每项有
value
和label
- 搜索时监听
input
,过滤出匹配的项 - 每个选项加个
checked
状态,多选时更新一个selectedList
- 别忘了,选中的要能反显出来,样式也要跟上
嗯,做多了你会发现,这种组件其实就像瑞士军刀,场景多、复用高、还能自己拓展。如果你是用 Vue、React 开发,建议直接上 Ant Design 的Select
组件,功能全,文档也齐全。
如果你想快速用一套比较成熟的方案,Select2和bootstrap-select都还不错。适合想快点上线项目的你。
下载地址
用户评论