本文实例讲述了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果。分享给大家供大家参考，具体如下：

最近在做通行证项目，里面注册模块有邮箱注册，需求方想要在输入@后触发下拉框显示各个邮箱，效果如下：

超文本标记语言代码：

！DOCTYPE HTMl HTMl lang=' en ' head meta charset=' utf-8 '/title邮箱自动补全/title link rel='样式表type=' text/CSS ' href=' autocomplete。CSS ' media=' all '/头体h1邮箱自动补全上下翻动/h1 p当在输入框内输入@时，自动显示各个邮箱的下拉列表/p div class=' wrap '表单操作=' result。PHP ' method=' post ' input type=' text ' name=' email ' id=' email ' class=' InP ' autocomplete=' off '/br/br/input type=' text ' name=' other ' class=' InP ' autocomplete=' off '/br/br/input type=' submit ' value='提交表单id=' submit '/form/div/body/html脚本类型=' text/JavaScript ' src=' http : jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http : jquery。自动完成。js '/script脚本类型=' text/JavaScript ' $(function(){ $).自动完成(' # email ')；});/scriptcss代码：

@ charset“utf-8”；包装{ width :200 pxmargin :0 auto } h1 { font-size :36 px；文本对齐：居中；线高：60 px} p { font-size :20 px文本对齐：居中；线高：60 px}.InP { width :190 pxborder :1 px固体# cccborder-radius :5 px；高度：30 px线高：30 pxpadding:5px } #自动完成{ background : # fffborder :1 px固体# 4190dbdisplay:none宽度宽度：200px} #自动完成ul { list-style-type :无；余量：0划水：0;} #自动完成Li { color : # 333 cursor : pointer指针；font :12 px/22px 5b 8b 4f 53；文本缩进：5像素；} #自动完成。悬停{背景： # 6eb 6 Fecolor: # fff}js代码：

jQuery .自动完成=函数(选择器){ var elt=$(选择器);定义变量自动完成，AutoLIVAR STRHtml=[]；strhtml。push(' div class=' AutoComplete ' id=' AutoComplete ')；strhtml。push(' ul class=' AutoComplete _ ul ')；strhtml。推送(' Li class=' AutoComplete _ title ')请选择邮箱后缀/Li’)；strHtml。推(' Li Hz=' @ QQ。com '/Li ')；strHtml。推(' Li Hz=' @ 163。com '/Li ')；strHtml。推(' Li Hz=' @ 126。com '/Li ')；strHtml。推('李赫=' @搜狐。com '/Li ')；strHtml。推('李赫=' @新浪。com '/Li ')；strHtml。push('/ul ')；strHtml。push('/div ')；$(“正文”).追加(STRHtml。join(“”)；自动完成=$(' #自动完成');autoComplete.data('elt '，ELT)；autoLi=自动完成。find(' li: not(.AutoComplete _ title)')；奥托立。将鼠标悬停在(function(){ $(this))上.兄弟姐妹()。筛选器('。悬停')。removeClass(“”悬停');$(这个)。addClass(')悬停');}).mouseout(函数(){ $(此)).removeClass(“”悬停');}).鼠标向下(function(){ autocomplete。数据(“英语教学”).瓦尔($(这个).text()).change()；自动完成。hide()；});//用户名补全翻动英语教学。向上键(函数(e){ 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: $(这个)。偏移量()。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(例如，键码==13){//输入autoLi.filter(' .悬停')。鼠标向下()；e . PreventDefault()；//如有表单，阻止表单提交} }).focus(function(){ autocomplete。数据(' ELT '，$(this))；}).blur(function(){自动完成。hide()；});}result.php

？phpecho $_POST['电子邮件'].br/' .$ _ POST[' other ']；完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。