首页 新闻 会员 周边

js邮箱后缀自动提示功能实现不了 ,哪位大神帮忙看一下,我哪里出错了?

0
悬赏园豆:5 [待解决问题]
<!DOCTYPE html>
<html>
<head>
<meta name="description" charset="utf-8" content=""/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/Login.css"/>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="js/mailAutoComplete.js" type="text/javascript"></script>  
</head>

<body>
<div id="main_container">
<div id="main" class="row">
<div id="container" class="span6">
<form id="form_login">
<div class="control-group">
<label class="control-label" for="Email">邮箱:</label>
<div class="controls">
<span id="span">
<div id="mailListBox_0" class="justForJs out_box">
<div class="mailHover list_box" id="mailList_0">
<span class="mark_box"></span>@qq.com
</div>
<div class="mailHover focus_box" id="mailList_1">
<span class="mark_box"></span>@gmail.com
</div>
<div class="mailHover list_box" id="mailList_2">
<span class="mark_box"></span>@126.com
</div>
<div class="mailHover list_box" id="mailList_3">
<span class="mark_box"></span>@163.com
</div>
<div class="mailHover list_box" id="mailList_4">
<span class="mark_box"></span>@hotmail.com
</div>
<div class="mailHover list_box" id="mailList_5">
<span class="mark_box"></span>@yahoo.com
</div>
<div class="mailHover list_box" id="mailList_6">
<span class="mark_box"></span>@yahoo.com.cn
</div>
<div class="mailHover list_box" id="mailList_7">
<span class="mark_box"></span>@live.com
</div>
<div class="mailHover list_box" id="mailList_8">
<span class="mark_box"></span>@sohu.com
</div>
<div class="mailHover list_box" id="mailList_9">
<span class="mark_box"></span>@sina.com
</div>
</div>
<input type="text" id="customTest" placeholder="请输入邮箱地址"/>
</span>
</div>
</div>
<script>
alert(111);
$("#customTest").mailAutoComplete({
boxClass: "out_box", //外部box样式
listClass: "list_box", //默认的列表样式
focusClass: "focus_box", //列表选样式中
markCalss: "mark_box", //高亮样式
autoClass: false,
textHint: true, //提示文字自动隐藏
hintText: "请输入邮箱地址"
});
</script>
<div class="control-group">
<label class="control-label" for="Password">密码:</label>
<div class="controls">
<input type="text" placeholder="请输入你的密码"/>
<span class="help-inline"></span>
<div>
<a href="">忘记密码?</a>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"/>
<input type="hidden"/>下次自动登录
</label>
</div>
</div>
<div class="control-group">
<div class="controls">
<p>
<button type="submit" class="btn btn-primary"> 登 录 </button>
<a href="" class="btn btn-info"> 注 册 </a>
</p>
</div>
</div>
<div class="control-group"></div>
</form>
</div>
</div> 
</div>
</body>
</html>
张小西的_的主页 张小西的_ | 初学一级 | 园豆:199
提问于:2013-07-25 10:14
< >
分享
所有回答(2)
0

把整个文件扔上来。

Eric.luo | 园豆:853 (小虾三级) | 2013-07-25 16:00
0

我用了jquery.js和mailAutoComplete4.0.js测试,你的代码完全正确

ice&sww | 园豆:223 (菜鸟二级) | 2013-07-25 16:35

我也换成了jquery.js和mailAutoComplete4.0.js,可以用了!但是下拉列表的样式没有成功设置啊 !

下面是我的Login.css,

------------------------------------------------------------------------------

#container {margin: 100px 600px;}
.controls {margin-left:80px;}
.control-label {float: left;}
button[type="submit"] {
margin-right: 20px;
}
#mailListBox_0 {min-width: 201px;
position: absolute;
left: -6000px;
top: 22px;
z-index: 1;}
.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;}
#span {display: inline-block; position: relative; z-index: 0;}

-------------------------------------------------------------------------------------------

是不是4.0版本里没有对样式设置啊 ?

支持(0) 反对(0) 张小西的_ | 园豆:199 (初学一级) | 2013-07-26 11:57

@张小西的_: 你想设置成什么样的,截图给看看?

支持(0) 反对(0) ice&sww | 园豆:223 (菜鸟二级) | 2013-07-26 16:38

@ice&ww:有样式就行  ,列表外部样式、列表样式、鼠标经过样式有点就行 ,主要是现在不知道怎么在4.0上添加自己想要的样式

支持(0) 反对(0) 张小西的_ | 园豆:199 (初学一级) | 2013-07-28 10:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册