J.chong

連接觸發兼容

if(ie){
this.inp.onpropertychange = function(){}
}
else{
this.inp.oninput = function(){}
}

定義方法：

function Suggset(){
this.inp = document.getElementById('input1')
...
}

定義原型：

Suggset.prototype = {
init:function(){}, //初始化
toChange:function(){}, //主方法
showul:function(){}, //顯示ul方法
toBlur:function (){}, //光標離開時隱藏方法
tips:function(){}, //動態提示方法，即顯示ul篩選
sel:function(){} //選中方法,鼠標及鍵盤
}

正則

var re = new RegExp('@' + value.substring(value.indexOf('@') + 1)); 
//带@判断 匹配@，截取@后面的，即從帶@的位置indexOf開始後1位，使用substring方法截取
re.test(String) //調用

自定義屬性，如果為空，返回false

var email = this.li[i].getAttribute('email') //获取自定义标签email
if(!email)

選擇用onmousedown,非onclick~!
其他：特別注意this指向問題~！
佈局

<div id="box">
<div class="detail">
        <input type="text" id="input1" placeholder="郵箱/會員賬號/手機號" autocomplete="off" node-type="loginname" class="name" tabindex="1" name="loginname"/>
    </div>
    <div class="detail">
        <input type="password" id="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="@sohu.com" class="item">@sohu.com</li>
        <li email="@qq.com" class="item">@qq.com</li>
        <li email="@hotmail.com" class="item">@hotmail.com</li>
        <li email="@gmail.com" class="item">@gmail.com</li>
        <li email="@yahoo.com" class="item">@yahoo.com</li>
        <li email="@139.com" class="item">@139.com</li>
        <li email="@126.com" class="item">@126.com</li>
        <li email="@189.com" class="item">@189.com</li>
        <li email="@vip.qq.com" class="item">@vip.qq.com</li>
    </ul>
</div>

window.onload = function () {
    var s1 = new Suggset();
    s1.init()
}
function Suggset() {
    this.inp = document.getElementById('input1')
    this.ul = document.getElementById('suggest')
    this.li = this.ul.getElementsByTagName('li')
}
Suggset.prototype = {
    init: function () {
        this.toChange()
        this.toBlur();
    },
    toChange: function () {
        //ie:onpropertychange
        //標準：oninput
        var ie = !-[1,
        ]; //ie兼容
        var This = this;
        if (ie) {
            this.inp.onpropertychange = function () {
                if (This.inp.value == '') {
                    This.tips();
                    return
                } //IE下最后一个字母有问题，需要先This.tips()，再return
                else {
                    This.showul(); //注意不能写this.showul() this指  IE8下，onpropertychange打開即會觸發
                    This.tips();
                    This.sel(1);
                }
            }
        }
        else {
            this.inp.oninput = function () {
                This.showul(); //this.showul()
                This.tips();
                This.sel(1);//第一個li特殊處理
            }
        }
    },
    showul: function () {
        this.ul.style.display = 'block';
    },
    toBlur: function () { //光標離開時隱藏
        var This = this
        this.inp.onblur = function () {
            This.ul.style.display = 'none';
        }
    },
    tips: function () {
        var value = this.inp.value;
        var re = new RegExp('@' + value.substring(value.indexOf('@') + 1)); //带@判断 匹配@，截取@后面的
        for (var i = 1; i < this.li.length; i++) { //输入完后清空再输无法再显示，须在if前先全部显示出来！为
            this.li[i].style.display = 'block'
        }
        if (re.test(value)) {
            for (var i = 1; i < this.li.length; i++) {
                var email = this.li[i].getAttribute('email') //获取自定义标签email
                if (i == 1) {
                    this.li[i].innerHTML = value
                }
                else {
                    if (re.test(email)) {
                        this.li[i].style.display = 'block'
                    }
                    else {
                        this.li[i].style.display = 'none'
                    }
                }
            }
        }
        else {
            for (var i = 1; i < this.li.length; i++) {
                var email = this.li[i].getAttribute('email') //获取自定义标签email
                if (!email) { //如果没有自定义标签，即为空
                    this.li[i].innerHTML = value;
                }
                else {
                    this.li[i].innerHTML = value + email;
                }
            }
        }
    },
    sel: function (iNow) { //選中的方法,傳iNow進去
        var This = this
        for (var i = 1; i < this.li.length; i++) { //先還原，才不會出現第一個on與下面兩個同時出現
            this.li[i].className = 'item'
        }
        if (this.inp.value == '') {
            this.li[iNow].className = 'item'
        }
        else {
            this.li[iNow].className = 'on'
        }
        for (var i = 1; i < this.li.length; i++) {
            this.li[i].index = i
            this.li[i].onmouseover = function () {
                for (var i = 1; i < This.li.length; i++) { //再做循環還原class //this有問題
                    This.li[i].className = 'item' //this有問題 []此處的this應該指向父級,This.li[i].className
                }
                this.className = 'on' //當前選中加on //this 正確
                iNow = this.index //如果選到中間，鍵盤控制須在中間開始，所以iNow = this.index;
            }
            this.li[i].onmousedown = function () {
                This.inp.value = this.innerHTML
            }
        }
        this.inp.onkeydown = function (ev) {
            var ev = ev || event //獲取鍵值，
            if (ev.keyCode == 38) {//上
                if (iNow == 1) { //鍵盤控制第一個時返回最後一個
                    iNow = This.li.length - 1;
                }
                else {
                    iNow--;
                }
                for (var i = 1; i < This.li.length; i++) { //再做循環還原class //this有問題
                    This.li[i].className = 'item' //this有問題 []此處的this應該指向父級,This.li[i].className
                }
                This.li[iNow].className = 'on'
            }
            else if (ev.keyCode == 40) {  //下
                if (iNow == This.li.length - 1) { //鍵盤控制到最後一個時返回 == 1
                    iNow = 1;
                }
                else {
                    iNow++;
                }
                for (var i = 1; i < This.li.length; i++) { //再做循環還原class //this有問題
                    This.li[i].className = 'item' //this有問題 []此處的this應該指向父級,This.li[i].className
                }
                This.li[iNow].className = 'on'
            }
            else if (ev.keyCode == 13) { //回車
                This.inp.value = This.li[iNow].innerHTML; //當前選擇
                This.inp.onblur();
            }
        }
    }
};

運行

獲取class兼容方法：

    function getByClass(oParent, sClass) {
        var aEle = oParent.getElementsByTagName('*');
        var result = [] //最后返回数组
        var re = new RegExp('\\b' + sClass + '\\b', 'i');//正则对象
        for (var i = 0; i < aEle.length; i++) {
            if (re.test(aEle[i].className)) {
                result.push(aEle[i])
            }
        }
        return result;
    }

js代碼：

window.onload = function(){
    var ul = document.getElementsByTagName('ul')[0]
    var a = getByClass(document, 'normal')
    var span1 = getByClass(document, 'float_layer');
    var timer = null;
    for (var i = 0; i < a.length; i++) {
        a[i].index = i;
        a[i].onmouseover = function () { //移到a.normal
            for (var i = 0; i < a.length; i++) { //清除所有顯示
                span1[i].style.display = 'none'
            }
            span1[this.index].style.display = 'block' //當前顯示
            clearInterval(timer) //在a.normal上也須清除定時器
        }
        a[i].onmouseout = function () { //移開a.normal
            var This = this
            timer = setTimeout(function () {
                span1[This.index].style.display = 'none' //this指setTimeout的對象window，改變this指向
            }, 1000)
        }
        span1[i].onmouseover = function () { //在span.float_layer也顯示，所以需要清除timer
            clearInterval(timer)
        }
        span1[i].onmouseout = function () { //離開span.float_layer，消失
            var This = this;
            timer = setTimeout(function () {
                This.style.display = 'none'
            }, 1000)
        }
    }
}

運行