ComboBoxLite - 基于Ext-core的自动补全

[置顶] 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

 

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'
		
	});