今天在公司做一个电子商务网站的注册会员时，要求用户在电子邮箱文本框中输入时，给与热点提示常用的电子邮箱，帮助用户选择，提高体验效果。下面是用jquery+css实现的邮箱自动补全，供大家参考和学习。
html代码：emailautocomple.html
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>邮箱自动补全</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/emailautocomple.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/emailautocomple.js"></script>
<script type="text/javascript">
$(function(){
$.autocomplete("#email"); //（要补全文本框的id）
});
</script>
</head>
<body>
<form action="">
姓名：<input type="text" name="username" id="username"/><br/>
邮箱：<input type="text" name="email" id="email"/>
</form>
</body>
</html>
js代码：js/emailautocomple.js（实现自动补全的关键代码）
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;}
效果图：