jQuery实现文本框邮箱输入自动补全效果

邮箱自动完成的效果在网站上大多都看过，但是质量参差不齐，今天突然在网上看到一篇博客，感觉这个插件很好，就想来写一下分享给大家！

效果图如下：

完整演示代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题邮箱地址自动完成功能/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式。演示p { width :1000 px左边距左：auto右边距：汽车；}.输入{ padding:12px宽度宽度：300像素边界：1像素固体# c2c2c2边界半径：4 pxbox-shadow:0 0 1px #fff，插图0 0 2px rgba(0，0，0，15);背景-color : # f2f2f 2；font-size :14 px}.emailist { border :1 px solid # bdbd；边界半径： 4px背景-color : # fff；color : # 666 font-size :14 px；列表样式类型：0;划水：0;余量：0飞越：隐藏；}.emailist Li { padd :2 px 11 xcursor : pointer指针；}.电子邮箱。来吧李：悬停{底色： # eee}/style/head body div class=' demo ' pinput type=' email ' class=' input input imi list ' name=' email ' placeholder='请输入邮箱所需的自动对焦自动完成=' off '/p/div/body/html脚本src=' http : js/jquery-1。6 .2 .量滴js '/script script src=' http : js/jquery。mailtutocomplete-4.0。js '/script脚本类型=' text/JavaScript ' $().输入列表')。邮件自动完成()；//使用方法/scriptjs实现效果代码(jquery.mailAutoComplete-4.0.js)如下：

(函数($){ $。fn。邮件自动完成=函数(选项){ var defaults={ class name : ' email ist '，email: ['qq.com '，' gmail.com '，' 126.com '，' 163.com '，' hotmail.com '，' yahoo.com '，' yahoo.com.cn '，' sina.com '，' sina.com '，'新浪网'，//邮件数组Zin dex : 11 }；//最终参数var params=$ .扩展({}，默认值，选项| | { });//是否现代浏览器var是现代的。screenx==' number '，visibility=' visibility//键值与关键字var key={ 'up': 38，' down': 40，' enter': 13，' esc': 27，' tab ' : 9 }；//组装超文本标记语言的方法var FneMailList=function(input){ var HTMleMailList=' '，arrValue=input.value.split('@ ')，ArreMailNew=[]；$.每个(params.email，function(index，email) { if (arrValue.length！==2 | | arr值[1]==' ' | | |电子邮件。(arr值[1])的索引.toLowerCase())===0){ arremailnew。推送(电子邮件)；} });$.每个(arrEmailNew，function(index，email){ htmlEmailList=htmlEmailList ' Li '(输入。indexselected===index？class=' on ' ' : ' ')' ' ArrValue[0]' @ ' email '/Li '；});返回htmlEmailList }；//显示还是隐藏var fnEmailVisible=function(ul，isIndexChange) { var value=$ .trim(this.value)，HTMl LiST=if(value==' ' | |(HTMl LiST=FneMailLiST(this))===' '){ ul。CSS(可见性，'隐藏');} else { IsindexChange(this。选择的索引=-1)；ul.css(可见性，"可见")。HTMl(HTMl LiST)；} };返回$(这个)。每个（函数(){这个。index selected=-1；//列表容器创建定义变量元素=thisvar eleUl=$('ul/ul ').css({ position: 'absolute '，marginTop:元素。偏置热量，最小宽度：元素。偏移扭曲-2，可见性：“隐藏”，zIndex: params.zIndex }).addClass(params.className).bind('click '，function(e){ var target=e . target；if(目标。标记名。tolowercase()===' Li '){ $(元素)。val(target.innerHTML).触发器('输入');$(这个)。css(可见性，'隐藏');元素。焦点()；//添加于2013-11-20 } });$(这个)。前(Eleul)；//IE6的宽度if(！窗户. XMLHttpRequest){ Eleul。宽度(元素。offset with-2)；} //不同浏览器的不同事件是现代的吗？$(这个)。bind('input '，function(){ FneMailvisible。呼叫(这个，eleUl，真的)；}):元素。attachevent(' on property change '，function(e) { if (e.propertyName！=='值')返回；fnEmailVisible.call(element，eleUl，true)；});$(文档)。绑定({ '点击' :函数(e){ var target=e . target，HTMl LiST=if(target==element element。value(HTMl LiST=Fnemail LiST(element，params . email)){ Eleul . CSS(可见性，'可见').HTMl(HTMl LiST)；} else if (target！=eleUl.get(0) target.parentNode！=eleUl.get(0)) { eleUl.css(可见性，'隐藏');} }，键盘输入：函数{ var eleLi=Eleul。find(' Li ')；if(eleul。CSS(可见性)=='可见性'){ switch(e . key code){ case key。高达： {元素。选定的索引-；if(元素。索引选择了0)元素。选择的索引=-1 eleli。长度；} e . prevent default e . prevent default()；打破；}案例密钥。向下： {元素。已选择索引；if(元素。选择的索引=eleli。长度){元素。选择的索引=0；} e . prevent default e . prevent default()；打破；}案例密钥。输入： { e . prevent default()；艾丽。get(元素。所选索引)$(元素).瓦尔(Eleli。eq(元素。索引已选择).html())；eleUl.css('可见性','隐藏');打破；}案例密钥。tab :案件关键。ESC : { Eleul。' CSS('可见','隐藏');打破；} } if (element.indexSelected！==-1) { eleUl.html(fnEmailList(元素));} } } });});};})(jQuery)；以上就是本文的全部内容，希望对大家的学习有所帮助。