<!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>
把整个文件扔上来。
我用了jquery.js和mailAutoComplete4.0.js测试,你的代码完全正确
我也换成了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版本里没有对样式设置啊 ?
@张小西的_: 你想设置成什么样的,截图给看看?
@ice&ww:有样式就行 ,列表外部样式、列表样式、鼠标经过样式有点就行 ,主要是现在不知道怎么在4.0上添加自己想要的样式