ComboBoxLite
[置顶] Lite-Ext 适合WebPage的轻量级Ext在 google code持续更新，这里停止
演示@google code
实现要点：
1.ul li 显示提示列表，放弃google 的 table显示
2.键盘处理细节，esc 键的处理
3.输入缓冲时间的处理，防止输入过快
4.store 层的抽象 ,分离
5.extjs trigger icon 细节
6.中文输入处理，采用轮询 (2009-12-03)
1.0
http://www.agoit.com/upload/attachment/98682/93f14a8f-0336-385d-9813-38066d857154.png
1.6
http://www.agoit.com/upload/attachment/111876/cc8828f5-155d-3302-9b8b-0b337cbc9417.png
/*v1.0(20090428) 自动补全防google实现，暂时实现内存store ,待实现 远程 JsonStorev1.5(20090526) 借鉴extjs combobox(trigger 细节考虑) 实现其大部分功能（除去ajax），摒弃其空白图片占位做法v1.6(20090606) 实现ajax获取数据的 Ext.ux.AutocompleteLite.RemoteStorev2.0(20090811) ie6 界面调整，失去焦点处理调整，ajax次序问题调整,添加triger配置，ext-core css标记浏览器方法避免v2.0.1(20090903) z-index change to 99999v2.5(20091203) 中文输入法兼容修正，改用轮询查询输入变化,算法大幅变动,hiddenName配置取消，没有意义*/
使用代码 ：
/*从内存中获取数据*/new Ext.ux.AutocompleteLite({//文本框idid:'autoCompleteTest',maxHeight:200,//只要含有 getSuggestions:function(autocompleteLite,query,ahead) {} 方法 的对象 即可，设置自动补全的数据//MemeryStore.getSuggestions : /*getSuggestions:function(autocompleteLite,query,ahead,allowEmpty) {var x=[];for(var i=0;i<this.data.length;i++) if((allowEmpty&&query.trim().length==0)||this.data.label.indexOf(query)!=-1) x.push(this.data);autocompleteLite.autoComplete(x,ahead);}*/store:new Ext.ux.AutocompleteLite.MemeryStore({data:[{label:'123',value:'1'},{label:'456',value:'2'},{label:'789',value:'3'}]}),editable :true,//是否支持自动在文本框显示第一条补全 ,google 为 falsetypeahead:true,emptyText:'我想试试实现ext'});/*Ajax 获取数据*/new Ext.ux.AutocompleteLite({//文本框idid:'autoCompleteTestRemote',maxHeight:200,//fetch.jsp?query=xx//返回数据应该为格式：/*{data:[{label:'123',value:'1'},{label:'456',value:'2'},{label:'789',value:'3'}] }*/store:new Ext.ux.AutocompleteLite.RemoteStore({//此处改为你的jsp，参数queryurl:'data.html'}),editable :true,//是否支持自动在文本框显示第一条补全 ,google 为 falsetypeahead:true,emptyText:'我想试试实现ext'});new Ext.ux.AutocompleteLite({//文本框idid:'selectMy',maxHeight:200,store:new Ext.ux.AutocompleteLite.MemeryStore({data:[{label:'123',value:'1'},{label:'456',value:'2'},{label:'789',value:'3'}]}),//False to prevent the user from typing text directly into the field, just like a traditional select (defaults to true) editable :false,emptyText:'我想试试实现ext'});
页:
[1]