jQuery UI 实现email输入提示实例_jquery

效果：
 

复制代码 代码如下:

使用了Jquery UI ,要导入的js和css:








<script> <BR>var emails=["163.com","yahoo.com","yahoo.cn","126.com","sina.com"]; <BR>$( function () { <BR>//为输入框绑定事件 <BR>$( "#email" ).keyup( function(){ <BR>emailiInp(); <BR>}); <BR>}); <BR>function emailiInp(){ <BR>var arrs= new Array() <BR>inpVal=$( "#email" ).val(); <BR>//根据输入的值，动态的创建下拉列表 <BR>$.each(emails, function (index,info){ <BR>if (inpVal.indexOf("@" )==-1) <BR>{ <BR>//没有输入@ <BR>arrs[index]=inpVal+ "@" +info; <BR>} else { <BR>//输入@ <BR>arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" ))+"@" +info; <BR>} <BR>}) <BR>$( "#email" ).autocomplete({ <BR>//绑定下拉列表内容 <BR>source: arrs <BR>}); <BR>} <BR></script>
最后再来个文本框：