<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{ margin:0; padding:0;}
body{ font:12px/1.125 Arial,Helvetica,sans-serif;}
li{ list-style:none;}
#login{ width:252px; height:385px; background:url(bg.jpg) no-repeat; margin:20px auto; position:relative;}
.detail{margin:0 0 5px 30px; position:relative; top:110px;}
.detail input{ color: #999999; border:1px solid #74C8E5; border-radius:3px 3px 3px 3px; height:15px; line-height:14px; padding:8px 5px 7px; width:184px;}
#suggest{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #CCCCCC; left:30px; margin:0; overflow:hidden; padding:0; position:absolute; text-align:left; top:142px; visibility:visible; width:194px ;z-index:1; display:none;}
.note, .item{ clear: both; color: #999999; cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0 1px; padding: 0 5px; white-space: nowrap;}
.active{ white-space:nowrap; clear:both; color:rgb(153, 153, 153); cursor:pointer; font-size:12px; height:20px; line-height:20px; list-style:none outside none; margin:0pt 1px; padding:0pt 5px; background:none repeat scroll 0% 0% rgb(232, 244, 252);}
</style>
<script>
window.οnlοad=function(){
var s1=new Suggest();
s1.init();
};
function Suggest(){
this.oInput = document.getElementById('input1');
this.oUl = document.getElementById('suggest');
this.aLi = this.oUl.getElementsByTagName('li');
}
//面向对象函数的原型链,每个函数之间用逗号隔开
Suggest.prototype={
init: function(){
this.toChang();
this.toBlur();
},
toChang:function(){
//ie : onpropertychange
//标准 : oninput
var ie = !-[1,];
var This=this;
if(ie){
this.oInput.onpropertychange=function(){
if(This.oInput.value==''){
This.tips();
return
}
This.thowUl();
This.tips();
This.sel(1);
};
}
else{
this.oInput.οninput=function(){
This.thowUl();
This.tips();
This.sel(1);//默认选中第二行
};
}
},
//显示列表函数
thowUl : function(){
this.oUl.style.display = 'block';
},
toBlur : function(){
//在哪个方法下调用,this就指向哪个对象,这里的this指向oInput
var This = this;//只要用到this 都写上这一句吧,
//这里的this也可以用This代替,
this.oInput.onblur = function(){
This.oUl.style.display = 'none';
};
},
tips:function(){
var value=this.oInput.value;
//@之前是往li中添加,之后是进行筛选,要不输入的都是添加到li中
//正则匹配@之后的字符串,substring截取@后面的字符串,indexOf('@')找到@所在的位置直到最后
var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+'');
//如果不加这一句,当输入一次后,全部删除,输第二次的时候就没匹配了,第二次不会进行re.test(value),直接到else了
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].style.display = 'block';
}
//如果匹配不到,直接添加即可,如果匹配到,匹配到的显示出来,剩余的隐藏
if(re.test(value)){
for(var i=0;i<this.aLi.length;i++){
var oEmail=this.aLi[i].getAttribute('email');
if(i==1){
this.aLi[i].innerHTML=value;
}
else{
//否则,匹配oEmail,如果与输入匹配到的就显示,匹配不到的就隐藏
if(re.test(oEmail)){
this.aLi[i].style.display='block';
}
else{
this.aLi[i].style.display='none';
}
}
}
}
else{
for(var i=1;i<this.aLi.length;i++){
//DOM方式获取自定义标签email,如果自定义标签的值为空,则li的值为Oinput的值,否则,为输入框的值加上原本li标签的值
//getAttribute() 方法返回指定属性名的属性值。
var oEmail=this.aLi[i].getAttribute('email');
if(!oEmail){
this.aLi[i].innerHTML=value;
}
else{
this.aLi[i].innerHTML=value+oEmail;
}
}
}
},
//选中函数
sel:function(iNow){
//这里的this不可以用This代替,在sel下都可以用this,一旦sel下的另一函数用指针,就要有This
var This=this;
//这是为了当执行第二次的时候把所以选中都清空
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].className = 'item';
}
//当输入框为空时,没有选中的样式,当不为空时默认选中第二行,即第一条
if(this.oInput.value==''){
this.aLi[iNow].className='item';//未选中状态
}
else{
this.aLi[iNow].className='active';//选中状态
}
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].index=i;//索引
this.aLi[i].οnmοuseοver=function(){
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
//this.className='active';//这两句没区别
iNow=this.index;
};
this.aLi[i].οnmοusedοwn=function(){
This.oInput.value=this.innerHTML;//这里也可以用This.aLi[iNow].innerHTML;
This.oInput.blur();//选中后让光标离开,否则,li标签不会隐藏
};
}
//添加键盘上下键的操作
this.oInput.οnkeydοwn=function(ev){
var ev = ev||window.event;//event对象获取键值,按下的是那个键
//38代表向上箭头,40 代表向下箭头,还要考虑的是走到最后把INow重新变成0
if(ev.keyCode==38){//向上
if(iNow==0){
iNow=This.aLi.length-1;
}
else{
iNow--;
}
//先把所有的都变成未选中状态
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
}
else if(ev.keyCode==40){//向下
if(iNow==This.aLi.length-1){
iNow=0;
}
else{
iNow++;
}
//先把所有的都变成未选中状态
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
}
//13回车
else if(ev.keyCode==13){//回车
This.oInput.value=This.aLi[iNow].innerHTML;
}
};
},
};
</script>
<body>
<div id="login">
<div class="detail">
<input id="input1" type="text" maxlength="128" placeholder="邮箱/会员帐号/手机号" autocomplete="off" node-type="loginname" class="name" tabindex="1" name="loginname">
</div>
<div class="detail">
<input type="password" maxlength="24" placeholder="请输入密码" node-type="password" class="pass" tabindex="2" name="password"></div>
<ul id="suggest">
<li class="note">请选择邮箱类型</li>
<li email="" class="item"></li>
<li email="@sina.com" class="item">@sina.com</li>
<li email="@163.com" class="item">@163.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@126.com</li>
<li email="@vip.sina.com" class="item">@vip.sina.com</li>
<li email="@sina.cn" class="item">@sina.cn</li>
<li email="@hotmail.com" class="item">@hotmail.com</li>
<li email="@gmail.com" class="item">@gmail.com</li>
<li email="@sohu.com" class="item">@sohu.com</li>
<li email="@yahoo.cn" class="item">@yahoo.cn</li>
<li email="@139.com" class="item">@139.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@189.cn</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{ margin:0; padding:0;}
body{ font:12px/1.125 Arial,Helvetica,sans-serif;}
li{ list-style:none;}
#login{ width:252px; height:385px; background:url(bg.jpg) no-repeat; margin:20px auto; position:relative;}
.detail{margin:0 0 5px 30px; position:relative; top:110px;}
.detail input{ color: #999999; border:1px solid #74C8E5; border-radius:3px 3px 3px 3px; height:15px; line-height:14px; padding:8px 5px 7px; width:184px;}
#suggest{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #CCCCCC; left:30px; margin:0; overflow:hidden; padding:0; position:absolute; text-align:left; top:142px; visibility:visible; width:194px ;z-index:1; display:none;}
.note, .item{ clear: both; color: #999999; cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0 1px; padding: 0 5px; white-space: nowrap;}
.active{ white-space:nowrap; clear:both; color:rgb(153, 153, 153); cursor:pointer; font-size:12px; height:20px; line-height:20px; list-style:none outside none; margin:0pt 1px; padding:0pt 5px; background:none repeat scroll 0% 0% rgb(232, 244, 252);}
</style>
<script>
window.οnlοad=function(){
var s1=new Suggest();
s1.init();
};
function Suggest(){
this.oInput = document.getElementById('input1');
this.oUl = document.getElementById('suggest');
this.aLi = this.oUl.getElementsByTagName('li');
}
//面向对象函数的原型链,每个函数之间用逗号隔开
Suggest.prototype={
init: function(){
this.toChang();
this.toBlur();
},
toChang:function(){
//ie : onpropertychange
//标准 : oninput
var ie = !-[1,];
var This=this;
if(ie){
this.oInput.onpropertychange=function(){
if(This.oInput.value==''){
This.tips();
return
}
This.thowUl();
This.tips();
This.sel(1);
};
}
else{
this.oInput.οninput=function(){
This.thowUl();
This.tips();
This.sel(1);//默认选中第二行
};
}
},
//显示列表函数
thowUl : function(){
this.oUl.style.display = 'block';
},
toBlur : function(){
//在哪个方法下调用,this就指向哪个对象,这里的this指向oInput
var This = this;//只要用到this 都写上这一句吧,
//这里的this也可以用This代替,
this.oInput.onblur = function(){
This.oUl.style.display = 'none';
};
},
tips:function(){
var value=this.oInput.value;
//@之前是往li中添加,之后是进行筛选,要不输入的都是添加到li中
//正则匹配@之后的字符串,substring截取@后面的字符串,indexOf('@')找到@所在的位置直到最后
var re=new RegExp('@'+value.substring(value.indexOf('@')+1)+'');
//如果不加这一句,当输入一次后,全部删除,输第二次的时候就没匹配了,第二次不会进行re.test(value),直接到else了
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].style.display = 'block';
}
//如果匹配不到,直接添加即可,如果匹配到,匹配到的显示出来,剩余的隐藏
if(re.test(value)){
for(var i=0;i<this.aLi.length;i++){
var oEmail=this.aLi[i].getAttribute('email');
if(i==1){
this.aLi[i].innerHTML=value;
}
else{
//否则,匹配oEmail,如果与输入匹配到的就显示,匹配不到的就隐藏
if(re.test(oEmail)){
this.aLi[i].style.display='block';
}
else{
this.aLi[i].style.display='none';
}
}
}
}
else{
for(var i=1;i<this.aLi.length;i++){
//DOM方式获取自定义标签email,如果自定义标签的值为空,则li的值为Oinput的值,否则,为输入框的值加上原本li标签的值
//getAttribute() 方法返回指定属性名的属性值。
var oEmail=this.aLi[i].getAttribute('email');
if(!oEmail){
this.aLi[i].innerHTML=value;
}
else{
this.aLi[i].innerHTML=value+oEmail;
}
}
}
},
//选中函数
sel:function(iNow){
//这里的this不可以用This代替,在sel下都可以用this,一旦sel下的另一函数用指针,就要有This
var This=this;
//这是为了当执行第二次的时候把所以选中都清空
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].className = 'item';
}
//当输入框为空时,没有选中的样式,当不为空时默认选中第二行,即第一条
if(this.oInput.value==''){
this.aLi[iNow].className='item';//未选中状态
}
else{
this.aLi[iNow].className='active';//选中状态
}
for(var i=1;i<this.aLi.length;i++){
this.aLi[i].index=i;//索引
this.aLi[i].οnmοuseοver=function(){
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
//this.className='active';//这两句没区别
iNow=this.index;
};
this.aLi[i].οnmοusedοwn=function(){
This.oInput.value=this.innerHTML;//这里也可以用This.aLi[iNow].innerHTML;
This.oInput.blur();//选中后让光标离开,否则,li标签不会隐藏
};
}
//添加键盘上下键的操作
this.oInput.οnkeydοwn=function(ev){
var ev = ev||window.event;//event对象获取键值,按下的是那个键
//38代表向上箭头,40 代表向下箭头,还要考虑的是走到最后把INow重新变成0
if(ev.keyCode==38){//向上
if(iNow==0){
iNow=This.aLi.length-1;
}
else{
iNow--;
}
//先把所有的都变成未选中状态
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
}
else if(ev.keyCode==40){//向下
if(iNow==This.aLi.length-1){
iNow=0;
}
else{
iNow++;
}
//先把所有的都变成未选中状态
for(var i=1;i<This.aLi.length;i++){
This.aLi[i].className='item';
}
This.aLi[iNow].className='active';
}
//13回车
else if(ev.keyCode==13){//回车
This.oInput.value=This.aLi[iNow].innerHTML;
}
};
},
};
</script>
<body>
<div id="login">
<div class="detail">
<input id="input1" type="text" maxlength="128" placeholder="邮箱/会员帐号/手机号" autocomplete="off" node-type="loginname" class="name" tabindex="1" name="loginname">
</div>
<div class="detail">
<input type="password" maxlength="24" placeholder="请输入密码" node-type="password" class="pass" tabindex="2" name="password"></div>
<ul id="suggest">
<li class="note">请选择邮箱类型</li>
<li email="" class="item"></li>
<li email="@sina.com" class="item">@sina.com</li>
<li email="@163.com" class="item">@163.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@126.com</li>
<li email="@vip.sina.com" class="item">@vip.sina.com</li>
<li email="@sina.cn" class="item">@sina.cn</li>
<li email="@hotmail.com" class="item">@hotmail.com</li>
<li email="@gmail.com" class="item">@gmail.com</li>
<li email="@sohu.com" class="item">@sohu.com</li>
<li email="@yahoo.cn" class="item">@yahoo.cn</li>
<li email="@139.com" class="item">@139.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@189.cn</li>
</ul>
</div>
</body>
</html>