JS列表的下拉菜单组件[仿美化控件select].docVIP

???? 今天是农历23 也是小年，在这祝福大家新年快乐！今天给大家分享的是：JS列表的下拉菜单组件，因为目前项目正好要用到这个，所以提前研究了下，看到KISSY也有这么一个组件，所以自己也封装了一个，KISSY demo链接 ???? KISSY组件名字叫 一个解决大数据列表渲染效率的下拉菜单组件。, 他对这个组件做了一次小优化。(假如服务器返回10000条数据或者更多的话，那么我们前端一次性操作10000条数据的话很会影响性能，他们做的优化是：将数组拆分，根据浏览器本身的脚本执行能力进行分批渲染。)，但是目前kissy demo上有加载2000条数据的demo，在火狐下还是会有卡住的现象，如果稍不好的话 有可能会导致浏览器重启的可能。而我今天做的demo和他们的功能类似，但是唯一不同点就是：假如返回10000条数据的话 我没有对数组分批渲染，而是循环10000次 把数据保存到一个变量里 然后一次性动态加载进来，或许这么做和他们那种操作效率可能会低那么点(具体的我没有测试过)。所以我今天的标题没有和他们那样一起叫。所以今天的标题上：JS列表的下拉菜单组件. 首先要说明的是：一般的需求肯定是满足的，一个下拉框也不可能有那么多数据(一般情况下！)。 下面是我做的demo(JS列表的下拉菜单组件)。JSFiddle地址如下： ?想要看demo，请轻轻的点击我！我怕疼的！温柔点！ ?基本原理： ? ? ? 满足的基本功能是：一个基本下拉框，但是他与下拉框不同的是：他既可以输入精确匹配到某一项，也可以点击下拉，也支持键盘上下移操作。但同时当我在输入框输入时候没有匹配到某一项时候，点击文档document 那么下拉框隐藏掉，input值为空。同时且支持静态数据渲染 又支持post请求渲染数据。 基本的配置项如下： ? parentCls .parentCls,???输入框父元素class 默认 inputElemCls ?.inputElem,???? 目标元素的class inputWidth ?100,?????????????? 目标元素的宽度 单位(PX) ?selectCls ??.caret,??????????? 下来小箭头class hoverBg hoverBg,????????? 鼠标移上去的背景 isSelectHide true,????????????????? 点击下拉框某一项 是否隐藏 默认true timeId 100,????????????????? 默认多少毫秒消失下拉框 dataSource [],??????????????????? 数据源返回的格式如下：静态数据 否则的话?? (如果数组为空的话) 在内部发post请求 renderHTMLCallback ?null?????????????? keyup时 渲染数据后的回调函数 callback ?null??????????????? 点击某一项 提供回调 ?如上面配置： 其中dataSource如果初始化为空数组的话，那么直接在内部发post请求渲染数据，否则的话 也可以渲染静态数据：如下 dataSource: [??????????? {text: 列表项1, value: 1},??????????? {text: 列表项2, value: 2},??????????? {text: 列表项3, value: 3},??????????? {text: 列表项4, value: 4},??????????? {text: 列表项5, value: 5},??????????? {text: 列表项6, value: 6},??????????? {text: 列表项7, value: 7},??????????? {text: 列表项8, value: 8},??????????? {text: 列表项9, value: 9},??????????? {text: 列表项10, value: 10},??????????? {text: 列表项11, value: 11}??????? ] ?如果dataSource 的长度大于0 的话 那么他会按照静态数据渲染，不会发post请求 否则的话 (如果数组为空，支持发post请求) 去渲染数据。 对外提供的方法有: setValue()? ?在外部实例话后 可以调用此方法 设置初始化值。比如demo页面设置的格式如下：?? ??? ?// 设置初始化选择项。??????? selectedItem: {??????????? value: 4,??????????? text: 列表项4??????? } ?getValue(