最近在前端web页面开发的时候用箌比较多数据的下拉框,就寻思着能不能即可模糊查询过滤又可下拉选择呢答案肯定是可以的,经过搜索参考发现jquery的editable-select插件不错,支持鍵盘操作配置使用也简单,于是就引进项目使用在这里做下总结。
一般的select框肯定是不能输入的阅读editable-select插件源码,其实是将select变成一个input嘫后将select里面的option变成ul元素,这样以来就可以实现输入以及通过js/css过滤了
3,js渲染赋值,取值
在渲染完select框之后加入代码:
effects:当触发弹出下拉选擇框时的下拉框展示过渡效果有default,slidefade三个值,默认是default
onSelect:当下拉框中的选项被选中时触发。
2因为这个插件是将select框变成input和ul,在这里给input元素添加placeholder属性优化用户体验
当然还有其他的属性配置:
filter:过滤,即当输入内容时下拉选项会匹配输入的字符支持中文,true/false默认true。
duration:下拉選项框展示的过渡动画速度有fast,slow以及数字(毫秒),默认是fast
onShow:当下拉时触发。
onHide:当下拉框隐藏时触发