jquery css实现邮箱自动补全

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

超文本标记语言代码：emailAutoComple.html

！' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题邮箱自动补全/title meta http-equiv=' content-type ' content=' text/html；charset=UTF-8 ' link type=' text/CSS ' rel='样式表href=' CSS/emailautocomple。CSS ' script type=' text/JavaScript ' src=' http : js/jquery-1。7 .2 .量滴js '/脚本类型=' text/JAVAScript ' src=' http : js/emailautocomple。js '/script脚本类型=' text/JavaScript ' $(函数自动完成(' # email ')；//(要补全文本框的id)})；/脚本/头部身体形态动作=' '姓名：输入类型=' text ' name=' userName ' id=' userName '/br/邮箱：输入类型=' text ' name=' email ' id=' email '/form/body/HTMljs代码：js/emailAutoComple.js(实现自动补全的关键代码)

jQuery .自动完成=函数(选择器){ var elt=$(选择器);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 ' '李赫=' @ VIP。新浪。com/' Li ' '李赫=' @新浪。cn ' '//将差异追加到身体上$(“正文”).追加(STRHtml)；定义变量自动完成，奥托立自动完成=$(' #自动完成');autoComplete.data('elt '，ELT)；autoLi=自动完成。find(' Li ')；奥托立。将鼠标悬停在(function(){ $(this))上.兄弟姐妹()。筛选器('。悬停')。removeClass(“”悬停');$(这个)。addClass(')悬停');}).mouseout(函数(){ $(此)).removeClass(“”悬停');}).鼠标向下(function(){ autocomplete。数据(“英语教学”).瓦尔($(这个).text()).change()；自动完成。hide()；});//用户名补全翻动elt.keyup(函数{ if(/13|38|40|116/.测试(e . KeyCode)| |这个。value==' '){ return false；} var username=this.valueif(用户名。indexof(' @ ')==-1){自动完成。hide()；返回false} AutoLI。每个(函数(){ this。innerHTMl=用户名。替换(/\ @).*/,' ')$(这个)。attr('赫兹')；如果(这个。innerhtml。indexof(username)=0){ $(this).show()；}else{ $(this).hide()；} }).筛选器('。悬停')。removeClass(“”悬停');自动完成。show().css({ left : $(this)).偏移量()。左，顶：美元（这个)。偏移量()。top $(这个)。outhealth(true)-1，position: 'absolute '，zindex : ' 99999 ' })；if(autoLi.filter(':visible ').长度==0){自动完成。hide()；} else { AutoLI。过滤器(' :可见').等式(0).addClass(')悬停');} }).向下键(函数(e){ if(e.keyCode==38){ //上autoLi.filter(' .悬停')。prev().不是('。自动完成_标题')。addClass(')悬停')。下一个()。removeClass(“”悬停');}else if(e.keyCode==40){ //下autoLi.filter(' .悬停')。下一个()。addClass(')悬停')。prev().removeClass(“”悬停');}else if(e.keyCode==13){ //确定autoLi.filter(' .悬停')。鼠标向下()；} }).focus(function(){ autocomplete。数据(' ELT '，$(this))；}).blur(function(){自动完成。hide()；});};半铸钢钢性铸铁(铸造半钢)代码：css/emailAutoComple.css

#自动完成{ background : # fffborder :1 px固体# 4190dbdisplay:none宽度宽度：150px} #自动完成ul { list-style-type :无；余量：0划水：0;} #自动完成Li { color : # 333 cursor : pointer指针；font :12 px/22px \ 5b 8b \ 4f 53；文本缩进：5像素；} #自动完成。悬停{背景： # 6eb 6 Fecolor: # fff}效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。