您好,欢迎访问一九零五行业门户网

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                                 _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('@')                                 _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                 li += ''+ '' + '@' + automail.vars.mailarr[i] + '' + '';
            }
            automail.list = $(''+ li +'
');
            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 = $(''+ _value +'');
            $('.item',automail.list).prepend(name);
        }
        //添加列表
        automail.add = function(){
            if(typeof automail.list == 'undefined' || automail.list.length         }
        //移除列表
        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)
复制代码 代码如下:
无标题文档
其它类似信息

推荐信息