jquery+css实现邮箱自动补全

今天在公司做一个电子商务网站的注册会员时，要求用户在电子邮箱文本框中输入时，给与热点提示常用的电子邮箱，帮助用户选择，提高体验效果。下面是用Jquery+css实现的邮箱自动补全，供大家参考和学习。

HTML代码：emailAutoComple.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<title>邮箱自动补全</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/emailAutoComple.css">             <form action="">            姓名：<input type="text" name="userName" id="userName"><br>            邮箱：<input type="text" name="email" id="email"> </form>

JS代码：js/emailAutoComple.js（实现自动补全的关键代码）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

jQuery.AutoComplete = function(selector){     var elt = $(selector);     var strHtml = '<div class="AutoComplete" id="AutoComplete">'+                 '        <ul class="AutoComplete_ul">'+                 '            <li hz="@163.com"></li>'+                 '            <li hz="@126.com"></li>'+                 '            <li hz="@139.com"></li>'+                 '            <li hz="@189.com"></li>'+                 '            <li hz="@qq.com"></li>'+                 '            <li hz="@vip.sina.com"></li>'+                 '            <li hz="@sina.cn"></li>'+                 '            <li hz="@sina.com"></li>'+                 '            <li hz="@sohu.com"></li>'+                 '            <li hz="@hotmail.com"></li>'+                 '            <li hz="@gmail.com"></li>'+                 '            <li hz="@wo.com.cn"></li>'+                 '            <li hz="@21cn.com"></li>'+                 '            <li hz="@aliyun.com"></li>'+                 '            <li hz="@yahoo.com"></li>'+                 '            <li hz="@foxmail.com"></li>'+                 '        </ul>'+                 '    </div>';     //将div追加到body上     $('body').append(strHtml);              var autoComplete,autoLi;     autoComplete = $('#AutoComplete');            autoComplete.data('elt',elt);     autoLi = autoComplete.find('li');     autoLi.mouseover(function(){         $(this).siblings().filter('.hover').removeClass('hover');         $(this).addClass('hover');     }).mouseout(function(){         $(this).removeClass('hover');     }).mousedown(function(){         autoComplete.data('elt').val($(this).text()).change();         autoComplete.hide();     });     //用户名补全+翻动     elt.keyup(function(e){         if(/13|38|40|116/.test(e.keyCode) || this.value==''){             return false;         }         var username = this.value;         if(username.indexOf('@')==-1){             autoComplete.hide();             return false;         }         autoLi.each(function(){             this.innerHTML = username.replace(/\@+.*/,'')+$(this).attr('hz');             if(this.innerHTML.indexOf(username)>=0){                 $(this).show();             }else{                 $(this).hide();                }         }).filter('.hover').removeClass('hover');         autoComplete.show().css({             left : $(this).offset().left,             top : $(this).offset().top + $(this).outerHeight(true) - 1,             position: 'absolute',             zIndex: '99999'         });         if(autoLi.filter(':visible').length==0){             autoComplete.hide();         }else{             autoLi.filter(':visible').eq(0).addClass('hover');                    }     }).keydown(function(e){         if(e.keyCode==38){ //上             autoLi.filter('.hover').prev().not('.AutoComplete_title').addClass('hover').next().removeClass('hover');         }else if(e.keyCode==40){ //下             autoLi.filter('.hover').next().addClass('hover').prev().removeClass('hover');         }else if(e.keyCode==13){ //确定             autoLi.filter('.hover').mousedown();         }     }).focus(function(){         autoComplete.data('elt',$(this));     }).blur(function(){         autoComplete.hide();     }); };

CSS代码：css/emailAutoComple.css

#AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:150px;}
#AutoComplete ul{list-style-type:none;margin:0;padding:0;}
#AutoComplete li{color:#333;cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}
#AutoComplete .hover{background:#6eb6fe;color:#fff;}

效果图：

 

分类: jquery