Email自动完成控件

/**
* 根据用户键入内容生成下方提示邮箱列表，主要功能：
* 1.支持按键上、下键循环选择
* 2.支持回车选中内容
* 3.支持鼠标选中内容
* 4.失去焦点时获取当前选择内容
* 特点：
* 1.采用绝对定位，不用担心布局问题
* 2.基于ext-core 3.0支持主流浏览器
* BUG;
* 1.ie6下出现的滚动条时会挡住最下方提示内容
* 2.ie6、chrome不能通过拖动横向滚动条查看全部提示
* 3.ie6下样式有点小问题
*
* @author chemzqm@gmail.com
* @version 1.0
* @since 2010-4-8
*/
Ext.ns('Ext.ux');

Ext.ux.EmailTip = Ext.extend(Ext.util.Observable, {
suffix: ['126.com', '163.com', 'gmail.com'],
pattern: /^(/w+)([/-+.][/w]+)*$/,
editing: false,//编辑状态标实
KEYUP: 38,
KEYDOWN: 40,
KEYENTER: 13,
constructor: function(elId, config){
config = config || {};
Ext.apply(this, config);
Ext.ux.EmailTip.superclass.constructor.call(this, config);
this.el = Ext.get(elId);
this.initEvents();
},
initEvents: function(){
this.el.on('keyup', function(e, t, o){
e.preventDefault();
if (this.editing) {
switch (e.getKey()) {
case this.KEYUP:
this.moveSelect(false);
return;case this.KEYDOWN:
this.moveSelect(true);
return;case this.KEYENTER:
this.setSelectedValue();
return;default:
this.showTipes();
}
}
else {
this.showTipes();
}
}, this);
this.el.on('blur', this.setSelectedValue, this);
},
setSelectedValue: function(set){
if (!this.editing)
return;
this.editing = false;
var sDom = this.tipDiv.child('.hover');
if (sDom && set !== false)
this.el.dom.value = sDom.child('li').dom.innerHTML;
this.tipDiv.removeAllListeners();
this.tipDiv.dom.innerHTML = '';
this.tipDiv.hide();
},
moveSelect: function(isDown){
var items = this.tipDiv.select('li');
var startindex = 0;
var count = items.getCount();
var find = false;
items.each(function(el, th, index){
if (el.parent().hasClass('hover')) {
startindex = (count + index +(isDown ? 1 : -1)) % count;
find = true;
return false;
}
});
startindex = (!find && !isDown) ? count - 1 : startindex;
items.item(startindex).parent().radioClass('hover');
},
/**
* 获取列表数组，没有时返回空数组
*/
getTipList: function(){
var value = this.el.dom.value;
var values = value.split('@');
if (!this.pattern.exec(values[0])) {//用户名不合法
return [];
}
var list = [];
if (value.indexOf('@') != -1) {
Ext.each(this.suffix, function(str){
if (!values[1]) {//只有@没有后缀
list.push(values[0] + '@' + str);
}
else
if (str.indexOf(values[1]) == 0)//后缀匹配
list.push(values[0] + '@' + str);
});
}
else {
Ext.each(this.suffix, function(str){
list.push(values[0] + '@' + str)
});
}
return list;
},
showTipes: function(){
var Helper = Ext.DomHelper;
if (!this.tipDiv) {
this.tipDiv = Helper.insertAfter(this.el, {
tag: 'div',
cls:'tipDiv'
}, true);
this.tipDiv.setStyle({
top: this.el.getY() + this.el.getHeight() + 'px',
left: this.el.getX() + 'px',
width: this.el.getWidth() - 2 + 'px'
});
}
this.tipDiv.removeAllListeners();
this.tipDiv.dom.innerHTML = '';
var list = this.getTipList();
if (list && list.length != 0) {
Ext.each(list, function(tip){
Helper.append(this.tipDiv, {
tag: 'li',
cls: 'tips',
html: tip
}, true).wrap();
if(Ext.isIE6){
//TODO ie6滚动条会挡住内容，暂时无法解决
}
}, this);
this.tipDiv.on('mouseover', function(e, t){
Ext.fly(t).parent().radioClass('hover');
}, this, {
delegate: 'li'
});
this.tipDiv.show();
this.editing = true;
}
else {
this.tipDiv.hide();
this.editing = false;
}
}
});

Css代码 .hover{
background-color:#0464BB;
}
.tipDiv{
position:absolute;
background-color:white;
border:1px solid black;
z-index:999;
height:auto;
overflow:auto;
}
.tipDiv li{
list-style:none;
display:inline;
cursor:pointer;
}
.tipDiv div{
height:18px;
margin:0px;
}