表单中邮箱自动完成的实现

来源：互联网发布：mysql数据库5.5.20安装编辑：程序博客网时间：2024/05/01 17:08

做好自己的网页是首要的，就是一个表单

我的表单如下

<!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><title>
财富88-提交申请
</title>
<meta name="keywords" content="股票" />
<meta name="keywords" content="新三板" />
<meta name="keywords" content="深圳股王" />
<meta name="keywords" content="股狼" />
<meta name="description" content="股票分析，新三板股权交易，股票分享，视频直播" />
<LINK href="tijiao/biaodan.css" rel="stylesheet">
<LINK href="tijiao/jquery.autocomplete.css" rel="stylesheet">
<STYLE type="text/css">
.register-width{
width:990px;
margin:0 auto;
}
</STYLE>
<STYLE>
body {font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53" !important;}
</STYLE>
<script src="tijiao/jquery-1.7.1.min.js"></script>
<script src="tijiao/jquery.validate.js"></script>
<script src="tijiao/jquery.autocomplete.js"></script>
<script src="tijiao/biaodan.js"></script>
</head>
<body>
<div class="register-width" style="height:200px" >
<h1 class="mingan" style="padding-top:100px">申请，马上就可以与大师<span style="color:blue">亲切交流</span></h1>
<h3>获得成就他身价过亿的20年炒股经验</h3>
</div>
<DIV class="register-width" id="reg-iframe">
<form id="InfoForm" method="post" action="insert.asp">
<div class="form-item">
<span class="form-label form-label-b">申请信息</span>
<span class="sub-title">个人信息</span>
</div>
<div class="form-item">
<span class="form-label"><span class="star">*</span>姓</span>
<input class="form-text err-input" id="J_Nick_1" name="xing" value="" title="请输入你的姓" placeholder="请输入你的姓"

type="text"/>
</div>
<div class="form-item">
<span class="form-label"><span class="star"> </span>名</span>
<input class="form-text err-input" id="J_Nick_2" name="ming" value="" title="请输入你的名" placeholder="请输入你的名"

type="text"/>
</div>
<div class="form-item">
<span class="form-label tsl" ><span class="star">*</span>电话</span>
<input class="form-text err-input" id="Tel" placeholder="请输入你的电话" title="请输入你的电话" name="tel" value=""

type="text"/>
</div>
<div class="form-item">
<span class="form-label tsl" ><span class="star">*</span>邮箱</span>
<input class="form-text" id="Email" placeholder="请输入你的邮箱" title="请输入你的邮箱" name="email" value="" type="text"/>
<ul class="ac_results">

</ul>
</div>
<div class="form-item ">
<button type="submit" class="btn btn-large tsl" data-phase-id="r_p_next" id="J_BtnInfoForm">确认</button>
</div>

</form>

</DIV>
<div><a href="http://www.miitbeian.gov.cn">粤ICP备16013499</div>
</body>

表单要完成，需要加载一定的css

对于css

我想说

margin padding 一个是外边距，一个是内边距

display none

和visible false 都表示隐藏，但是后者占位置，前者就不占位置

设定好css之后，自动完成列表就能显示了

表单的css

body {

background-image: url('bcg.png');

font-family: 'Helvetica', 'Arial', sans-serif;

text-align: center;

color: #ffffff;
}
#reg-iframe{
width:400px;
height:440px;
}
#reg-iframe .form-item{
margin:15px;
padding:0px;
}
#reg-iframe .sub-title{
color: #7f7f7f;
font-size: 9pt;
line-height: 37px;
}
#reg-iframe .form-label{
padding-top:8px;
display: inline;
float: left;
margin-left:-260px;
width: 240px;
text-align: right;
color: #7f7f7f;
}
#reg-iframe .form-label-b{
padding-top:3px;
font-weight: 700;
color: #000;
font-size: 18px;
}
#reg-iframe .star{
color: red;
vertical-align: middle;
margin-right: 4px;
color:red;
}
#reg-iframe .form-text{
border-radius:4px;
border:1px solid #ccc;
background:#fff;
height: 33px;
line-height: 33px;
width: 260px;
outline: 0;
color: #000;
font-size: 16px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
}
.btn{
display: inline-block;
zoom: 1;
*display: inline;
height: 36px;
line-height: 36px;
padding: 0 20px;
color: #FFF;
font-weight: 700;
font-size: 16px;
text-align: center;
background: #ff4001;
border: 0;
border-radius: 3px;
cursor: pointer;
}
.btn-large{
display: inline-block;
min-width: 260px;
height: 36px;
padding: 0 30px 1px;
background: #008fb2;
line-height: 33px;
font-size: 14px;
color: #fff;
text-align: center;
outline: 0;
}

然后是要显示的列表的css代码

.ac_results {
padding: 0px;
border: 2px solid WindowFrame;
background-color: #fff;
display:none;
overflow: hidden;
width: 260px;
margin-left:50px;
margin-top:0px;

}
.ac_results ul {
width: 100%;
padding: 1;
margin: 0;
}

.ac_results iframe {
position:absolute;
top:0;
left:0;
}
.ac_results li {
height:20px;
margin-left: -43px;
padding-left: 50px;
cursor: pointer;
font: menu;
font-size: 15px;
color:#000;
display: block;
width: 100%;
overflow: hidden;
text-align:left;
}
.ac_results li:hover{
background-color: #00f;
color: HighlightText;

}
.ac_loading {
background : Window url('./indicator.gif') right center no-repeat;
}
.ac_over {
background-color: #00f;
color: HighlightText;
}

最后是

js代码

js主要是获取邮箱的值，每次keyup读取一次，也触发事件

做一次自动完成列表的绘制

$(function(){

var mailList = new Array('@qq.com','@163.com','@sina.com','@hotmail.com');
$("#Email").bind("keyup",function(){
var val = $(this).val();
if(val == '' || val.indexOf("@")>-1){
$(".ac_results").hide();
return false;
}
$('.ac_results').empty();
for(var i = 0;i<mailList.length;i++){
var emailText = $(this).val();
$('.ac_results').append('<li class=addr>'+emailText+mailList[i]+'</li>');
}
$('.ac_results').show();
$('.ac_results li').click(function(){
$('#Email').val($(this).text());
$('.ac_results').hide();
})
})
})

运行结果如下图

0 0