输入框下拉提示效果

制作时间：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键也可以选中。

输入框下拉提示效果结束

不积跬步无以至千里