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

评论

6 楼 ironcool 2009-12-03  

再提一个意见:
似乎现在必须绑定到一个html的input元素中, 而不能凭空创建. 这就产生了一些限制, 在Panel中不太好用.

5 楼 yiminghe 2009-11-29  

ironcool 写道

今天又试了试windows下ie, 用搜狗输入法, 居然就可以了.

上次我用的是ff + ibus, 在debian上, 无法激发动作.

谢谢你的关注，我为了实现简单没有考虑中文输入兼容问题，
若考虑周全的话需要使用定时器 监控输入框变化而不是监控键盘输入，
有空我会加以完善

4 楼 ironcool 2009-11-29  

今天又试了试windows下ie, 用搜狗输入法, 居然就可以了.

上次我用的是ff + ibus, 在debian上, 无法激发动作.

3 楼 ironcool 2009-11-27  

中文问题仍然没有解决阿.

比如用输入法输入中国人民, 那么向服务器的请求根本不会激发, 此时删除一个汉字, 它才能检测到输入变化. 同时, 向其中粘贴文本似乎也不能起作用.

也许要换个方法来检测变化.

2 楼 czjie 2009-10-12  

你好，为什么我还是取不到页面的值呢？我的代码如下~初学Ext请多多指教

<input id="autoCompleteTestRemote" title="Google 搜索" name="autoCompleteTestRemote"	style='width:130px;'/>

new Ext.ux.AutocompleteLite({   
    //文本框id   
    id:'autoCompleteTestRemote',   
    maxHeight:200,
    store:new Ext.ux.AutocompleteLite.RemoteStore({   
        //此处改为你的jsp，参数query   
        url:'loadUserDinner.action?author='+ Ext.get("autoCompleteTestRemote").dom.value
    }),   
    editable :true,   
    //是否支持自动在文本框显示第一条补全 ,google 为 false   
    typeahead:true,   
    emptyText:'我想试试实现ext'  
});

1 楼 yiminghe 2009-05-26  

借用extjs的界面设计了，标题改名，
不仿google了，山寨extjs comboBox