效果图

部分复制的代码代码如下：//JavaScript document(function($){ $ . fn . extend({ ' change tips ' : function(value){ value=$)。extend ({divtip3360''}，value)var $ this=$(this)；var indexLi=0；//单击文档隐藏下拉层$(文档)。click(function(event){ if($(event。目标)。attr ('class')==值。div提示| | $(事件。目标)。is(' Li '){ var living=$(event。目标。$ this . val(LiVal)；blus()；} else { blus()；} })//隐藏下拉层functionblus () {$(值。div提示)。hide()；}//功能键Chang(up){ if(up==' up '){ if(index Li==1){ index Li=$(value。div提示)。儿童()。长度-1；} else { index Li-；} } else { if(index Li==$(value . DivTip)。儿童()。length-1){ indexLi=1；} else { indexLi} } $(value.divTip)。儿童()。情商(指数)。addClass('active ')。兄弟姐妹()。remove CLaSS()；}//当值改变时，Function val change(){ vartex=$ this . val()；//输入框的值为var fronts=//将字符串var af=/@/存储在“@”之前；var RegMail=new RegExp(tex . substring(tex . indexof(' @ ')))；//在“@”后面有一个字符串。注意常规的字面方法。不能使用变量。这是新的方法。//显示提示层，遍历if ($ this。val()==' '){ blurs()；}else{ $(value.divTip)。显示()。儿童()。每个(函数(索引){ var valAttr=$(this)。attr('电子邮件')；if(index==1){$(this)。文本(特克斯)。addClass('active ')。兄弟姐妹()。remove CLaSS()；}//如果(index1){ //如果输入值有“@”、if(af.test(tex)){ //如果包含“@”，则处理索引值大于1的LI元素，输入框中符号前的字符串被截断：Fronts=tex。子字符串(tex。indexof ('@ ')，0)；$(这个)。文字(正面为ValAttr)；//确定输入值“@”后的值是否包含电子邮件属性if (re Gmail。测试($ (this))。attr(' email ')){ $(this)。show()；}else{ if(index1){ $(this)。hide()；}}}//else{ $(this)。当输入值没有“@”时的文本(tex ValAttr)；} } })}//当输入框值发生变化时执行该功能，并在此判断事件的浏览器兼容性；if($.browser.msie){ $(this)。bind('propertychange '，function(){ ValChange()；}) }else{ $(this)。bind('input '，function(){ valChange()；})}//鼠标点击并悬停李$(值。div提示)。儿童()。悬停(function () {index Li=$ (this))。index()；//获取鼠标悬停时的LI索引值；if($(this)。index()！=0){ $(this)。addClass('active ')。兄弟姐妹()。remove CLaSS()；} })//上下按键盘移动LI $ this的背景色。keydown(函数(事件){if(事件。其中==38){//up key hang(' up ')} else if(event。其中==40) {//down keychang()}。else if(event . what==13){//输入varlival=$ (value。div提示)。儿童()。情商(指数李)。text()；$ this . val(LiVal)；blus()；} })}))}))(jQuery)一、功能分析：1。当1 .输入框的值发生变化时，将显示提示的下拉层；2.当输入框的值发生变化时，会显示提示的下拉层，根据输入内容自动添加在“@”前面；3.当输入框的值发生变化时，会显示提示下拉层，下拉层“@”后面的内容会根据输入的内容进行过滤；4.单击下拉层中的提示内容，其值将填入输入框中；5.按回车键将所选下拉层的内容填入输入框；6.按键盘的“上”或“下”键，在下拉层的选项中移动(循环移动，改变当前LI的背景颜色)；7.当鼠标悬停在下拉层的LI上时，会出现背景色。二、功能实现：1。输入框的值，当它改变时，事件为：propertychange(IE)或input(standard)；2.当propertychange事件发生时，取其输入框的值，然后取“@”前的值，赋给下拉层的LI加上LI的email属性值；3.当propertychange事件发生时，3.1取其输入框的值，然后取其“@”后的值，3.2定期将此值与下拉层LI的email属性值进行匹配；这里需要注意的是，常规的文字方法不能使用变量。这是新的方法。

这里的规律性是输入框“@”后面的值，所以它是有规律的、可变的。但是，LI的EMAIL属性值不变。4.这里使用一个事件委托方法，将点击事件绑定到文档，然后通过判断，点击时最初触发的是什么DOM元素。要决定，4.1是否隐藏下拉提示层？4.2仍然需要将下拉层和选择的值分配给输入框(这里不能直接使用。当输入框失去焦点时，隐藏下拉提示层，因为这将与单击下拉层并将其值填充到输入框在逻辑上是矛盾的；) 5.类似于上文第4条；6.需要注意的是，当鼠标悬停时，当前LI索引存储在一个全局变量中，这样就可以说出“上”或“下”按钮的起始位置；7.遍历LI，并绑定一个处理函数，用于将其当前背景颜色更改为悬停事件；感谢苗伟课堂提供的视频在线演示，http://demo.jb51.net/js/2012/myinputMail/打包下载了myinputMail_jb51.rar