jquery实现邮箱自动补全功能示例分享

(function($){
    $.fn.autoMail = function(options){ 
        var autoMail = $(this); 
        var _value   = ''; 
        var _index   = -1; 
        var _width   = autoMail.outerWidth(); 
        var _height  = autoMail.outerHeight(); 
        var _left    = autoMail.offset().left; 
        var _top     = autoMail.offset().top; 
        autoMail.defaults = { 
            deValue : '请输入邮箱地址', 
            textCls : 'text-gray', 
            listCls : 'list-mail', 
            listTop : 1, 
            mailArr  : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"] 
        } 
        //初始化 
        autoMail.init = function(){ 
            autoMail.vars = $.extend({},autoMail.defaults,options); 
            autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls); 
            autoMail.click(function(event){ 
                autoMail.select().removeClass(autoMail.vars.textCls); 
                if(autoMail.val() != autoMail.vars.deValue){ 
                    autoMail.add(); 
                    autoMail.order(_value); 
                    autoMail.list.find('.item').each(function(){ 
                        if($(this).text() == autoMail.val()){ 
                            $(this).siblings('.item').removeClass('select'); 
                            $(this).addClass('select'); 
                            return false; 
                        } 
                    }) 
                } 
                event.stopPropagation(); 
            }) 
            autoMail.blur(function(event){ 
                if(autoMail.val() == '' || autoMail.val() == autoMail.vars.deValue){ 
                    alert(autoMail.val()) 
                    autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls); 
                } 
            }) 
            //文本域键盘松开事件 
            autoMail.keyup(function(event){ 
                if($(autoMail.list).length == 0){ 
                    autoMail.add(); 
                } 
                if(autoMail.list.length > 0){ 
                    var keyCode = event.keyCode; 
                    //alert(keyCode) 
                    switch(keyCode){ 
                        case 13: 
                            autoMail.remove(); 
                            autoMail.blur(); 
                            break; 
                        case 38: 
                            _index--; 
                            if(_index < 0){ 
                                _index = 0; 
                            } 
                            autoMail.keyOperate(_index); 
                            break; 
                        case 40: 
                            _index++; 
                            if(_index > $('.item',autoMail.list).length - 1){ 
                                _index = ('.item',autoMail.list).length - 1 
                            } 
                            autoMail.keyOperate(_index); 
                            break; 
                        default: 
                            if(autoMail.val().indexOf('@') < 0){ 
                                _value = autoMail.val(); 
                                autoMail.order(_value);      
                            }     
                    }   
                } 
            }) 
            $(document).click(function(){ 
                if($(autoMail.list).length > 0){ 
                    autoMail.remove(); 
                    autoMail.blur(); 
                } 
            }) 
        } 
        //创建列表 
        autoMail.create = function(){ 
            var li = ''; 
            for(var i = 0; i < autoMail.vars.mailArr.length; i++){ 
                li += '<li class="item">'+ '<span class="style">' + '@' + autoMail.vars.mailArr[i] + '</span>' + '</li>'; 
            } 
            autoMail.list = $('<div class="'+ autoMail.vars.listCls +'"><ul>'+ li +'</ul></div>'); 
            autoMail.list.css({ 
                'position' : 'absolute', 
                'left'     : _left, 
                'top'      : _top + _height + autoMail.vars.listTop, 
                'min-width': _width 
            }) 
            autoMail.list.appendTo($('body')); 
            //邮箱列表绑定事件 
            autoMail.list.find('.item').click(function(event){ 
                autoMail.getVal($(this)); 
                autoMail.remove(); 
                event.stopPropagation(); 
            }) 
            autoMail.list.find('.item').hover( 
                function(){ $(this).addClass('hover'); }, 
                function(){ $(this).removeClass('hover'); } 
            ) 
            return autoMail.list; 
        } 
        //序列化列表 
        autoMail.order = function(_value){ 
            $('.name',autoMail.list).remove(); 
            var name = $('<span class="name">'+ _value +'</span>'); 
            $('.item',autoMail.list).prepend(name); 
        } 
        //添加列表 
        autoMail.add = function(){ 
            if(typeof autoMail.list == 'undefined' || autoMail.list.length < 1) autoMail.create(); 
        } 
        //移除列表 
        autoMail.remove = function(){ 
            if(autoMail.list.length > 0){ 
                autoMail.list.remove(); 
                delete autoMail.list; 
            } 
        } 
        //获取值 
        autoMail.getVal = function(obj){ 
            if($('.name',obj).text() != ''){ 
                var selectValue = obj.text(); 
                autoMail.val(selectValue);   
            }else{ 
                return false; 
            } 
        } 
        //键盘操作 
        autoMail.keyOperate = function(_index){ 
            $('.item',autoMail.list).eq(_index).addClass('hover').siblings('.item').removeClass('hover'); 
            autoMail.val($('.item',autoMail.list).eq(_index).text()); 
        } 
        //开始初始话动作... 
        autoMail.init(); 
    } 
})(jQuery)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="./jquery.js"></script>
        <script type="text/javascript" src="./autoMail.js"></script>
        <script type="text/javascript">
        $(function(){
            $('.automail').autoMail();
        })  
        </script>
        <style type="text/css">
        *{padding: 0; margin: 0;}
        body{font-family: "微软雅黑"; color: #333; font-size: 12px;}
        ul{list-style: none;}
        input{ width: 180px; height: 16px; line-height: 16px; margin: 100px; padding: 4px; border: 1px solid #aaa; font-size: 12px; font-family: "微软雅黑"; }
        .list-mail ul{ border: 1px solid #aaa; line-heihgt: 24px; padding: 6px; }
        .list-mail li{ cursor: pointer; padding: 2px 3px; margin-bottom: 2px; }
        .list-mail .name{ color: #982114; }
        .list-mail .hover{ background: #fefacf; }
        .list-mail .select{ background: #dedaae; }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <input type="text" class="automail" />
    </body>
</html>