Email自动完成控件

简介：根据用户输入文本框的内容在下方弹出一个完整Email列表供用户选择；用户可以按上下键进行选择，可以按回车键选中，也可以用鼠标点击选中；附件是一个小例子

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

.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;
			}