[置顶] Lite-Ext 适合WebPage的轻量级Ext
在 google code 持续更新,这里停止
实现要点:
1.ul li 显示提示列表,放弃google 的 table显示
2.键盘处理细节,esc 键的处理
3.输入缓冲时间的处理,防止输入过快
4.store 层的抽象 ,分离
5.extjs trigger icon 细节
6.中文输入处理,采用轮询 (2009-12-03)
1.0
1.6
/* v1.0(20090428) 自动补全防google实现,暂时实现内存store ,待实现 远程 JsonStore v1.5(20090526) 借鉴extjs combobox(trigger 细节考虑) 实现其大部分功能(除去ajax),摒弃其空白图片占位做法 v1.6(20090606) 实现ajax获取数据的 Ext.ux.AutocompleteLite.RemoteStore v2.0(20090811) ie6 界面调整,失去焦点处理调整,ajax次序问题调整,添加triger配置,ext-core css标记浏览器方法避免 v2.0.1(20090903) z-index change to 99999 v2.5(20091203) 中文输入法兼容修正,改用轮询查询输入变化,算法大幅变动,hiddenName配置取消,没有意义 */
使用代码 :
/* 从内存中获取数据 */ new Ext.ux.AutocompleteLite({ //文本框id id:'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[i].label.indexOf(query)!=-1) x.push(this.data[i]); 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 为 false typeahead:true, emptyText:'我想试试实现ext' }); /* Ajax 获取数据 */ new Ext.ux.AutocompleteLite({ //文本框id id:'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,参数query url:'data.html' }), editable :true, //是否支持自动在文本框显示第一条补全 ,google 为 false typeahead:true, emptyText:'我想试试实现ext' }); new Ext.ux.AutocompleteLite({ //文本框id id:'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' });