jquery實作郵箱自動補全功能範例分享_jquery

複製程式碼 程式碼如下:

(function($){
    $.fn.autoMail = 函數(選項){
            var _index   = -1; var _width   = autoMail.outerWidth();
        var _height = autoMail.outerHeight();   = 自動郵件.offset().top;
        autoMail.defaults = {
            deValue : '請輸入信箱位址',          listCls : '名單郵件',
            listTop : 1,
            mailArr  : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo .com.com.com","hotmail.com","yahoo.com","yahoo .com.com.D." .com","sohu.com","sina.com"]
        }
        //初始化
    autoMail. vars = $.extend({} ,autoMail.defaults,options);
            autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls                 autoMail.select() .removeClass(autoMail.vars.textCls);
                if(autoMail.val() != auto autoMail.add();
                    autoMail.order(_value);
                    autoMail.list.find('.item').each(function(){
   == autoMail.val()){
                            $(此) .siblings ('.item').removeClass('select');
                        }            返回false;             }
               }
                event. stopPropagation();
            })
            Mail.val() == '' || autoMail.val() == autoMail.vars.deValue) {
alert(autoMail.val())
                    autoMail.val(auto具有     }
            })
            // 文字領域鍵盤上讀取事件
            autoMail. c Mail.list).length == 0){
                    autoMail.add() //警報（鍵碼）
                    開關（鍵碼）{
狀況13:  autoMail.remove();
                                 中斷;
                       /8 ？
                         _index--;
   (_index                                        }
                                  中斷；
                     
                          _index ;      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.find( '.item').click(function(event){
                autoMail.getVal($(this));             })
    list.find('.item').hover(
               function(){ $(this).addClass( '懸停'); },             )
            return autoMail.list;             $('.name', autoMail.list).remove();
            var name = $(''_value '');
   .prepend(name);
        }
        // 新增清單
       == 'undefined' || autoMail.list.length         }
        // 刪除清單
      toMail.list.length > 0){
                autoMail.list .remove();
                刪除autoMail.list;
         取得價值
        autoMail.getVal = function(obj){
            if($('.name ',obj).text() != '') {
                var selectValue = obj.text();             }else{
               與 返回false;
            }
        }
        //鍵盤      $('.item',autoMail.list).eq(_index).addClass('停').siblings('.item').removeClass('懸停');
            autoMail.val($('.item',autoMail.list).eq(_index).text());         }
        //開始初始文字動作...
        autoMail.init();
    }
})(jQuery)
   

複製代碼 代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   
         🎜> /title>