HTML5 datalist結合js實現動態郵箱地址

 

HTML代碼：

郵箱：<input type="email" id="email" list="emailList" name="off_autocomplete" />
<datalist id="emailList">
    <option value="*@qq.com">
    <option value="*@163.com">
    <option value="*@gmail.com">
    <option value="*@yahoo.com.cn">
    <option value="*@126.com">
</datalist>

JS代碼：

document.createElement("datalist");

var eleList = document.getElementById("emailList")
	, eleMail = document.getElementById("email");

if ("placeholder" in document.createElement("input")) {	
    // 獲得相似["qq.com", "163.com", "gmail.com", ...]的數據
    var arrEmailList = [].slice.call(eleList.getElementsByTagName("option")).map(function(option) {
        return option.value.replace("*@", "");    
    }), htmlListInit = eleList.innerHTML;    

    eleMail.fnListReplace = function() {
        var arrValue = this.value.trim().split("@");
        // 修復FireFox瀏覽器下無限input問題
        // 若是值不徹底匹配某option值，執行動態替換 
        if (arrValue.length !== 2 || arrEmailList.indexOf(arrValue[1]) === -1) {
            eleList.innerHTML = htmlListInit.replace(/\*/g, arrValue[0]);
        }        
        return this;
    };
    // 綁定輸入事件偵聽
    eleMail.addEventListener("input", function() {
        this.fnListReplace.call(this);        
    }, false);

    //  載入即匹配
    eleMail.fnListReplace.call(eleMail).focus();
} else {
    // IE6-9瀏覽器
    var option = eleList.getElementsByTagName("option"), eleSelect = null, indexOption = -1
    , arrEmailList = (function() {
        var arr = [], index = 0, length = option.length;
        for (; index < length; index+=1) {
            arr.push(option[index].value);
        }
        return arr;
    })();

    eleMail.parentNode.insertBefore(eleList, eleMail);

    eleMail.fnListReplace = function() {
        var htmlNewOption = '', value = this.value, arrValue = value.split("@"), lengthOption = 0;
        for (var index = 0; index<arrEmailList.length; index+=1) {
            if (arrValue.length !== 2 || 
            	arrValue[1] === "" || 
                arrEmailList[index].replace("*@", "").indexOf(arrValue[1]) === 0
            ) {
                htmlNewOption = htmlNewOption + 
                    '<option value="'+ arrEmailList[index] +'">'+
                    	arrEmailList[index] +
                '</option>';    
                lengthOption++;
            }
        }
        eleList.style.visibility = value && htmlNewOption? "visible": "hidden";
       eleList.innerHTML = (lengthOption == 1?
            '<select size="2" style="height:'+ (window.localStorage? "19": "24") +'px;">' :
            '<select size="'+ lengthOption +'">') +        
                htmlNewOption.replace(/\*/g, arrValue[0]) +
            '</select>';

        // 三個全局變量重置
        eleSelect = eleList.getElementsByTagName("select")[0];
        option = eleList.getElementsByTagName("option");
        indexOption = -1;

        // 寬度
        if (this.offsetWidth > eleSelect.offsetWidth) {
            eleSelect.style.width = this.offsetWidth;
        } else {
            eleSelect.style.width = '';    
        }
    };

    // 樣式
    var style = {
        position: "absolute",
        marginTop: eleMail.offsetHeight,
        visibility: "hidden"
    }, key;        
    for (key in style) {
        eleList.style[key] = style[key];        
    }

    // 事件
    eleMail.attachEvent("onpropertychange", function() {
        if (e && e.propertyName == "value") {
            eleMail.fnListReplace.call(eleMail);
        }
    });
    // 鍵盤上下
    eleMail.attachEvent("onkeyup", function(e) {
        switch(e.keyCode) {
            case 38: {
                indexOption--;
                if (indexOption < 0) {
                    indexOption = -1 + option.length;
                }
                break;
            }
            case 40: {
                indexOption++;    
                if (indexOption >= option.length) {
                    indexOption = 0;
                }
                break;
            }
            case 13: {
                if (indexOption !== -1) {
                    eleMail.value = eleSelect.value;    
                }
                eleList.style.visibility = "hidden";
                break;
            }
        }        
        option[indexOption] && (option[indexOption].selected = "selected");
    });

    document.body.attachEvent("onmouseup", function(event) {
        if (!event) return;
        var target = event.srcElement || event.target;
        if (target && target != eleMail && target.parentNode != eleSelect) {
            eleList.style.visibility = "hidden";
        }
    });

    eleMail.fnListReplace.call(eleMail);    

    // 選中
    eleList.attachEvent("onclick", function() {
        eleMail.value = eleSelect.value;
        eleList.style.visibility = "hidden";
    });
}