您的位置:首页 > Web前端 > jquery > 正文

jQuery邮箱自动补全

更多 时间:2015-3-1 类别:Web前端 浏览量:2553

jQuery邮箱自动补全

jQuery邮箱自动补全

一、jQuery邮箱自动补全的类似效果

 

二、实现邮箱自动补全的代码 (jquery.emailmatch.js)

 

  • JScript 代码   复制
  • 
    
    (function($){
        $.fn.emailMatch= function(settings){
            var defaultSettings = {
                emailTip:"请输入邮箱地址",
                aEmail: ["163.com", "qq.com", "gmail.com", "126.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live.com", "sohu.com", "sina.com"], //邮件数组
                wrapLayer:"body",
                className:"mailListBox",
                emailRemember:true,
                autoCursor:false,
                position:"bottom" // bottom, left , right
            };
            /* 合并默认参数和用户自定义参数 */
            settings = settings ? $.extend(defaultSettings,settings):defaultSettings;
            return this.each(function(){
                var elem = $(this),t=0,l=0,
                w = elem.outerWidth(), 
                h = elem.outerHeight(),
                selectVal = sMail = inputVal = "",arrayNum = 0,
                isIndex = -1;
                
                t = elem.position().top;
                l = elem.position().left;
                
                var mailWrap = document.createElement("li");
                $(mailWrap).attr({"id":elem.attr("id"),"class":settings.className})
                $(settings.wrapLayer).append(mailWrap);
                if($.trim(elem.val()) == ""){elem.val(settings.emailTip);};
                elem.focus(function(){
                    arrayNum = 0;
                    if($.trim(elem.val()) == settings.emailTip){elem.val('');}; // 清空 输入框 提示内容
                    if($.trim(elem.val()) !=""){
                        inputVal = $.trim(elem.val());
                        isIndex = inputVal.indexOf("@");
                        if(isIndex >= 0 ){
                            sMail = inputVal.substr(isIndex + 1);
                            inputVal = inputVal.substring(0,isIndex);
                            if(sMail !=""){
                                arrayNum = parseInt(!position(settings.aEmail,sMail)?0:position(settings.aEmail,sMail));
                            }
                        }
                        if(settings.autoCursor){
                            elem.val(inputVal);
                            if($.browser.msie ){
                                setCaretAtEnd(elem.attr("id"));
                            }
                        }
                        showList($(mailWrap),w,h,t,l);
                        createMailList(mailWrap,inputVal,sMail,settings.aEmail,arrayNum);
                    };
                }).blur(function(){
                    if(elem.val() == ''){
                        elem.val(settings.emailTip);
                        hideList($(mailWrap));
                        return false;
                    }; // 还原 输入框 提示内容
                    enterVal(mailWrap,elem);
                    hideList($(mailWrap));
                });
                elem.keyup(function(e){
                    var suffixArray = [], eKey = e && (e.which || e.keyCode);
                    //console.log(eKey);
                    switch(eKey){
                        case 9: // tab 按键
                            return;
                            break;
                        case 13: { // 回车 
                                enterVal(mailWrap,elem);
                                hideList($(mailWrap));
                        }break;
                        case 38:{ // 方向键 上
                            showList($(mailWrap),w,h,t,l);
                            cursorMove(mailWrap,-1);
                        }break;
                        case 40: {// 方向键 下
                            showList($(mailWrap),w,h,t,l);
                            cursorMove(mailWrap,+1);
                        }break;
                        default:{
                                inputVal = $.trim(elem.val());
                            var    keyIndex = inputVal.indexOf("@");
                            var suffix = "",suffixState = true;        
                            if(keyIndex >= 0){
                                suffix = inputVal.substr(keyIndex + 1);
                                inputVal = inputVal.substring(0,keyIndex);
                                $("#t2").text("BBB" + inputVal);
                                if(suffix != '' && settings.emailRemember){ // 过滤数组
                                    for (var i = 0; i < settings.aEmail.length; i++) {
                                        if (settings.aEmail[i].indexOf(suffix) == 0) {
                                            suffixArray.push(settings.aEmail[i]);
                                            suffixState = false;
                                        }
                                    }                
                                }
                                if(suffix != '' && !settings.emailRemember){ // 当前高亮 选项 
                                    for (var i = 0; i < settings.aEmail.length; i++) {
                                        if (settings.aEmail[i].indexOf(suffix) == 0) {
                                            arrayNum = i;
                                            suffixState = false;
                                            break;
                                        }
                                    }
                                }
                            }
                            
                            suffixArray = suffixArray.length > 0 ? suffixArray:settings.aEmail;
                            if(inputVal=="" && suffix == ""){
                                hideList($(mailWrap));
                                arrayNum = 0;
                                createMailList(mailWrap,inputVal,suffix,settings.aEmail,arrayNum);
    
      
    标签:jquery