jquery达成邮箱自动补全成效

2019-12-01 02:04栏目:竞技宝竞猜
TAG:

复制代码 代码如下:{ $.fn.autoMail = function{ var autoMail = $; 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{ autoMail.select().removeClass(autoMail.vars.textCls); if != autoMail.vars.deValue){ autoMail.add(); autoMail.order; autoMail.list.find.each{ if == autoMail.val.siblings.removeClass.addClass; return false; } }) } event.stopPropagation autoMail.blur{ if == '' || autoMail.val() == autoMail.vars.deValue){ alert autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls); } }) //文本域键盘松开事件 autoMail.keyup{ if.length == 0){ autoMail.add(); } if(autoMail.list.length > 0){ var keyCode = event.keyCode; //alert switch{ case 13: autoMail.remove; break; case 38: _index--; if{ _index = 0; } autoMail.keyOperate; break; case 40: _index++; if(_index > $('.item',autoMail.list).length - 1){ _index = ('.item',autoMail.list).length - 1 } autoMail.keyOperate; break; default: if.indexOf{ _value = autoMail.val(); autoMail.order $.click{ if.length > 0){ autoMail.remove; } }) } //创建列表 autoMail.create = function(){ var li = ''; for(var i = 0; i < autoMail.vars.mailArr.length; i++){ li += '

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: 

                            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

                            } 

                            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" ";

<html xmlns=";

    <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>

 

这篇文章主要介绍了jquery实现邮箱自动补全功能,大家参考使用吧 代码如下: (function($){ $.fn.autoMail = function(op...

'+ '' + '@' + autoMail.vars.mailArr[i] + '' + '

'; } autoMail.list = $('

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:jquery达成邮箱自动补全成效