输入框下拉提示效果

制作时间：13:30 - 15:45

平常在网站登录/注册时，填写邮箱或用户名时，都会有下拉的提示，直接点击你想要的就可以了。

效果图

html代码：

    

        
    
    

        
    
    

        
请选择邮箱类型
        

        
@sina.com
        
@163.com
        
@qq.com
        
@126.com
        
@vip.sina.com
        
@sina.cn
        
@hotmail.com
        
@gmail.com
        
@sohu.com
        
@yahoo.cn
        
@139.com
        
@wo.com.cn
        
@189.cn
    

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

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

其中的item方法.因为需要多次使用，所以单独编写一个方法。

item: function(){
        for(var i=1; i

7. 添加按键效果。

（1）给每个li添加onmousedown事件，实现点击选中效果。

this.aLi[i].onmousedown = function(){
        This.oInput.value = this.innerHTML;
}

（2）上下键控制移动。
（3）Enter键也可以选中。

输入框下拉提示效果结束

不积跬步无以至千里