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

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:
       &nnbsp;                    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 = $('<p class="'+ automail.vars.listcls +'"><ul>'+ li +'</ul></p>');
            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" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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>
        <p class="test"></p>
        <input type="text" class="automail" />
    </body>
</html>