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

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

我的表单如下

 
 


 
 
 
  

申请，马上就可以与大师亲切交流

获得成就他身价过亿的20年炒股经验

 

   

    申请信息
个人信息 

       

*姓
       

     type="text"/>

名
   

type="text"/>

*电话


type="text"/>

*邮箱

         

         
         

确认
   

 
 

粤ICP备16013499

表单要完成，需要加载一定的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 var emailText = $(this).val();
$('.ac_results').append('

'+emailText+mailList[i]+'

');
}
$('.ac_results').show();
$('.ac_results li').click(function(){
$('#Email').val($(this).text());
$('.ac_results').hide();
})
})
})

运行结果如下图