Email自动完成控件

 简介：根据用户输入文本框的内容在下方弹出一个完整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;    
            }