UseStudio.CloudFront/controls/pc/TAB/tab.js

/*
彭佳文 李泉 input补全控件
*/
Namespace.register("U.Control.TAB");

/*window.onload = function () {
    U.Control.TAB.start();
}*/

U.Control.TAB = function (elm, options) {
    /**
    *
    * get input position
    */
    function getPosition(obj) { //定位
        var t = obj.offsetTop + obj.offsetHeight;
        var l = obj.offsetLeft;

        while (obj = obj.offsetParent) {
            t += obj.offsetTop;
            l += obj.offsetLeft;
        }
        return { t: t, l: l }
    }
    U.Control.TAB.scroe = 0;

    /**
    * initial set
    *
    * @param {HTMLElEMENT} elm
    * @param {JSON} lib
    */
    var elm = this.elm = elm[0] || elm, lib = this.lib = lib, ordinate = getPosition(elm);
    var t = this.t = ordinate.t;
    var l = this.l = ordinate.l;
    var box = this.box = document.createElement("div");
    this.box.style.cssText = "position:absolute;left:" + l + ";top:" + t + ";width:384px;border:1px solid #E4E4E4;color:#B3B3B3;display:none;    top: 299px;left: 462px;z-index:999"
    box.id = 'box';
    document.body.appendChild(this.box);
    /**
    * initial input event
    */
    elm.addEventListener("keyup", function () {//给text附函数
        $("#box")[0].style.display = "block";
        var content = this.value;
        if (content.charAt(0) == "a" || content.charAt(0) == "b") {
            
            document.addEventListener("click", function () {
                $("#box")[0].style.display = "none;";
                $("#bi")[0].style.display = "none";
                U.Control.TAB.scroe = 0;
            });
            box.innerHTML = "";
            for (var i = 0; i < auto[content].length; i++) {
                var p = document.createElement("div");
                p.innerText = auto[content][i];
                p.id = auto[content][i];
                p.style.cssText = "width:336px;height:45px;line-height:48px;border-bottom:1px solid #F9F9F9;padding: 0px 24px;line-height: 45px;top: 427px;";
                p.onclick = function () {
                    elm.value = this.id;
                    box.style.display = "none";
                    $("#bi")[0].style.diplay = "none";
                }
                p.onmouseover = function () {
                    this.style.backgroundColor = '#F1F1F1';
                    this.childNodes[1].style.display = "block";
                }
                p.onmouseout = function () {
                    this.style.backgroundColor = 'white';
                    this.childNodes[1].style.display = "none";
                }
                var a = document.createElement("a");
                a.innerHTML = "删除";
                a.href = "#";
                a.style.cssText = "float:right;font-size: 13px;color: rgb(179, 179, 179);display:none";
                a.onclick = function (e) {
                    stopPropagation(e);
                    this.parentNode.remove();
                }
                p.appendChild(a);
                box.appendChild(p);
            }
            if ($("#bi")[0]) {
                $("#bi")[0].style.display = "block";
                return;
            }
            else {
                var qk_box = document.createElement("div");
                qk_box.style.cssText = "position:absolute;left:462px;top:530px;width:336px;height:45px;line-height:48px;border:1px solid rgb(228, 228, 228);padding: 0px 24px;line-height: 45px;display:block;z-index:999;";
                qk_box.id = "bi";
                document.body.appendChild(qk_box);

                var gd = document.createElement("a");
                gd.innerHTML = "更多历史";
                gd.href = "#";
                gd.style.cssText = "float:right;font-size: 12px;color:#9C9C9C;";
                qk_box.appendChild(gd);


                var qk = document.createElement("a");
                qk.innerHTML = "关闭历史";
                qk.href = "#";
                qk.style.cssText = "float:right;font-size: 12px;color:#9C9C9C;margin-right:10px;";
                qk.onclick = function () {
                    $("#box")[0].innerHTML = "";
                    $("#bi").style.display = "none";
                    U.Control.TAB.scroe = 0;
                }
                qk_box.appendChild(qk);
            }

        }
        else {
            $("#box")[0].innerHTML = "";
            //$("#bi").style.display = "none";
            U.Control.TAB.scroe = 0;
        }
    })
    /*
    下拉框键盘  上下键更换 ENTER键消失下拉框 
    */
    elm.onkeydown = function (e) {
        var aa = e || event;
        var last = box.childNodes.length;
        if (aa.keyCode == 38) { //上
            if (0 == U.Control.TAB.scroe) {
                U.Control.TAB.scroe = box.childNodes.length;
            }
            if (U.Control.TAB.scroe == 1) {
                box.childNodes[0].style.backgroundColor = '';
                box.childNodes[0].childNodes[1].style.display = "none";
                box.childNodes[last - 1].style.backgroundColor = '#F1F1F1';
                box.childNodes[last - 1].childNodes[1].style.display = 'block';
                elm.value = box.childNodes[last - 1].id;
            }
            if (U.Control.TAB.scroe - 2 <= 0) {
                box.childNodes[0].style.backgroundColor = '#F1F1F1';
                box.childNodes[0].childNodes[1].style.display = "block";
            }
            else {
                box.childNodes[U.Control.TAB.scroe - 2].style.backgroundColor = '#F1F1F1';
                box.childNodes[U.Control.TAB.scroe - 2].childNodes[1].style.display = "block";

            }
            //if(U.Control.TAB.scroe==0 ) box.childNodes[box.childNodes.length-1].style.backgroundColor='';
            box.childNodes[U.Control.TAB.scroe - 1].style.backgroundColor = '';
            box.childNodes[U.Control.TAB.scroe - 1].childNodes[1].style.display = "none";
            U.Control.TAB.scroe -= 1;
            elm.value = box.childNodes[U.Control.TAB.scroe - 1].id;
        }
        if (aa.keyCode == 13) { //enter
            box.innerHTML = "";
            $("#bi")[0].style.display = "none";
            U.Control.TAB.scroe = 0;
        }
        if (aa.keyCode == 40) { //下
            if (box.childNodes.length == U.Control.TAB.scroe) {
                U.Control.TAB.scroe = 0;
            }
            box.childNodes[U.Control.TAB.scroe].style.backgroundColor = '#F1F1F1';
            box.childNodes[U.Control.TAB.scroe].childNodes[1].style.display = 'block';
            if (U.Control.TAB.scroe == 0) {
                box.childNodes[box.childNodes.length - 1].style.backgroundColor = '';
                box.childNodes[box.childNodes.length - 1].childNodes[1].style.display = 'none';
            }
            else if (U.Control.TAB.scroe >= 1) {
                box.childNodes[U.Control.TAB.scroe - 1].style.backgroundColor = '';
                box.childNodes[U.Control.TAB.scroe - 1].childNodes[1].style.display = 'none';
            }
            elm.value = box.childNodes[U.Control.TAB.scroe].id;
            U.Control.TAB.scroe += 1;
        }


    }

}

function stopPropagation(e) {//阻止冒泡
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true; 
    }
}
U.Control.TAB.start = function () { //初始化 
    auto = {
        "a": ["abc", "ass", "abd", "aaaaa", "acc", ],
        "b": ["bag", "bit", "bug", "bsd", "banner"]
    }
    var g = $$("div", {}, $('body')[0]);
    var best = $$("div", { "id": "best" }, g);
    var a = $$("input", { "id": "a" }, best);
    var btn = $$("div", { "id": "btn", "innerHTML": "搜索" }, best);
    U.Control.TAB.dei(a,auto)
    return g;
}
U.Control.TAB.dei = function (a,json) {
    U.Control.TAB(a,json);
    //U.Control.TAB(document.getElementById("b"), json);

}