js邮箱自动补全
邮箱自动补全js和jQuery
html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现输入框自动补全邮箱提示 - 素材家园</title>
<link href="css/sucaijiayuan.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/emailAutoComplete.js"></script>
</head>
<body>
<center>
<h1>输入邮箱试试!</h1>
<br />
<div class="parentCls"><input type="text" class="inputElem"></div>
</center>
</body>
</html>
js: email.js
@charset "utf-8";
* { outline:none;
margin:0;
padding:0;
font-family:microsoft yahei;
}
ul, li {
list-style:none;
}
.inputElem {
width:220px;
height:26px;
line-height:26px;
padding: 0px 4px;
color: #666666;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid;
border-color: #b8b8b8 #dcdcdc #dcdcdc #b8b8b8;
}
.parentCls {
margin-bottom: 10px;
border: 2px solid #f2f2f2;
}
.auto-tip li {
width:100%;
text-align:left;
height:22px;
line-height:22px;
font-size:14px;
}
.auto-tip li.hoverBg {
background:#ddd;
cursor:pointer;
}
.auto-tip li em{font-style:normal;}
.red {
color:#333;
}
.hidden {
display:none;
}
外加一个jQuery.min.js