jQuery UI 实现email输入提示实例

172 阅读 0 评论 114 点赞

我是靠谱客的博主笨笨板栗，最近开发中收集的这篇文章主要介绍jQuery UI 实现email输入提示实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果：

复制代码代码如下:

 
使用了Jquery UI ,要导入的js和css: 
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
<link rel="stylesheet" href="../demos.css"> 
<script src="../../jquery-1.7.2.js"></script> 
<script src="../../ui/jquery.ui.core.js"></script> 
<script src="../../ui/jquery.ui.widget.js"></script> 
<script src="../../ui/jquery.ui.position.js"></script> 
<script src="../../ui/jquery.ui.autocomplete.js"></script> 

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