制作时间：13:30 - 15:45
平常在网站登录/注册时，填写邮箱或用户名时，都会有下拉的提示，直接点击你想要的就可以了。
效果图
html代码：
<body>
<div id="login">
<div class="detail">
<input type="text" id="input1" maxlength="128" placeholder="邮箱/会员帐号/手机号" autocomplete="off" name="loginname">
</div>
<div class="detail">
<input type="password" maxlength="24" placeholder="请输入密码">
</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>
Ul元素
实现步骤：
同样是用面向对象的思想编写代码。
1. 建立框架
window.onload = function(){
var s1 = new Suggest();
}
function Suggest(){
this.oInput = document.getElementById("input1");
this.oUl = document.getElementById("suggest");
this.aLi = this.oUl.getElementsByTagName("li");
}
Suggest.prototype = {
....
}
2. 点击 input 框让 ul 元素显示出来,
创建四个方法：
init
toChange
showUl
toBlur
showUl: function(){
this.oUl.style.display = "block";
},
toBlur: function(){
var This = this;
this.oInput.onblur = function(){
This.oUl.style.display = "none";
}
},
4. 当有输入时，下拉提示也同步显示数据
通过循环将 ul 中的每个 li元素的值改成手动输入的加上@后面下拉菜单上的值。
var value = this.oInput.value;
for(var i=1; i<this.aLi.length; i++){
var oEmail = this.aLi[i].getAttribute("email");
if(!oEmail){
this.aLi[i].innerHTML = value;
}else{
this.aLi[i].innerHTML = value+oEmail;
}
}
5. 当输入@后的匹配情况处理
6. 添加交互效果。
默认选中第一个。
给 li 元素添加onmouseover样式。
sel: function(inow){
var This = this;
this.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].onmouseover = function(){
This.item();
this.className = "active";
}
}
其中的item方法.因为需要多次使用，所以单独编写一个方法。
item: function(){
for(var i=1; i<this.aLi.length; i++){
this.aLi[i].className = "item";
}
}
7. 添加按键效果。
（1）给每个li添加onmousedown事件，实现点击选中效果。
this.aLi[i].onmousedown = function(){
This.oInput.value = this.innerHTML;
}
（2）上下键控制移动。
（3）Enter键也可以选中。
输入框下拉提示效果结束
不积跬步无以至千里
网友评论