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

复制代码 代码如下:

(function($){
    $.fn.autoMail = 函数(选项){
        var autoMail = $(this);
        var _value   = '';
        var _index   = -1; var _width   = autoMail.outerWidth();
        var _height = autoMail.outerHeight();
        var _left    = autoMail.offset().left;     = 自动邮件.offset().top;
        autoMail.defaults = {
            deValue : '请输入邮箱地址',
            textCls : 'text-gray',
            listCls : '列表邮件',
            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()){
                            $(这个) .siblings('.item').removeClass('select');
                          $(this).addClass('select');
                          返回 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() //警报（键码）
                    开关（键码）{
情况 13:
                           autoMail.remove();
                          autoMail.blur();
                           中断;
                        案例 38：
                          _index--;
                           if(_index                                 _index = 0;
                          }
                           autoMail.keyOperate(_index);
                           中断；
                      案例 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 += '

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

';
            }
            autoMail.list = $('

'+ li +'

');
            autoMail.list.css({
                '位置' : '绝对',
                '左'     : _left,
                '顶部'      : _top _height autoMail.vars.listTop,
                 '分钟-width': _width
            })
            autoMail.list.appendTo($('body'));
            //邮箱列表绑定事件
            autoMail.list.find('.item').click(function(event){
                autoMail.getVal($(this));
                autoMail.
                event.stopPropagation();
            })
           autoMail.list.find('.item').hover(
               function(){ $(this).addClass( '悬停'); },
               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();
                删除 autoMail.list；
            }
        }
        //获取值
        autoMail.getVal = function(obj){
            if($('.name',obj).text() != '') {
                var selectValue = obj.text();
                autoMail.val(selectValue);  
            }else{
                返回 false；
            }
        }
        //键盘操作
        autoMail.keyOperate = function(_index){
            $('.item',autoMail.list).eq(_index).addClass('悬停').siblings('.item').removeClass('悬停');
            autoMail.val($('.item',autoMail.list).eq(_index).text());
        }
        //开始初始话动作...
        autoMail.init();
    }
})(jQuery)

复制代码 代码如下: