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