首页 > 代码库 > jquery邮箱自动补全

jquery邮箱自动补全

在使用前需要有如下文件:

jquery-1.7.1.min.js

jquery.mailAutoComplete-3.1.js

大家可以到网上下载:

【jquery.mailAutoComplete-3.1.js】的请到这里下载:  http://download.csdn.net/detail/xiaolinzai888/7794939

[jquery-1.7.1.min.js]可以到jquery官网下载

页面

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
  .out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}
  .list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}
  .focus_box{background:#f0f3f9;}
  .mark_box{color:#c00;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>邮箱自动提示</title>
</head>
<script src="http://www.mamicode.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/jquery.mailAutoComplete-3.1.js" type="text/javascript"></script>
<body>
<br />
<br />
<p>邮箱自动提示:<input type="text" id="customTest" size="28" /></p>
</body>
</html>
<script>

$(function(){

   $("#customTest").mailAutoComplete({ 
  boxClass: "out_box", //外部box样式 
  listClass: "list_box", //默认的列表样式 
  focusClass: "focus_box", //列表选样式中 
  markCalss: "mark_box", //高亮样式 
  autoClass: true, 
  textHint: true, //提示文字自动隐藏 
  hintText: "请填写邮箱地址" 
  });  

});
</script>