Email自动完成控件

chemzqm

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