現實ComboBox(可編輯且能夠自動提示的select選擇框)

項目須要使用相似comboBox的web控件.現在現存的相關控件很是好.並且良莠不齊.extjs等大型控件有必定的實現.可是若是爲了一個控件而依賴extjs等大型前端js是很是很差的.爲此花了2天在前人的基礎上寫了一個齪劣的能夠編輯並自動提示過濾的select控件.和你們共同探討.

附件有完整的demo和源碼.

在HTML頁面中須要使用DIV裏面依次嵌套input和select.

<div id='netdbzonesDiv' style="float:left;" class="ctrlHeight">
                            <input id="netdbzonesInput" name="netdbzonesInput" type="text" class="ufo-conbobox-input box_shadow" />
                            <select name="zones" id="netdbzonesSelect" class="ufo-combobox-select">
                                <option value="1">aroduction_levels</option>
                                <option value="2">free type regex</option>
                                <option value="1">production_levels</option>
                                <option value="2">free type regex</option>
                                <option value="1">ebay</option>
                                <option value="2">free type regex</option>
                                <option value="1">probbbb</option>
                                <option value="2">free type regex</option>
                                <option value="1">croduction_levelsdfsf</option>
                                <option value="2">free type regex</option>
                                <option value="1">brodueeee</option>
                                <option value="2">free type regex</option>
                                <option value="2">abcdefg</option>
                                <option value="2">abc</option>
                                <option value="2">free type regex</option>
                            </select>
                        </div>

 而後使用下面的js傳入input,select,div的各自ID.

var combo1 = new Combobox({
                    _inputId : "devicesValueInput",
                    _selectId : "devicesValueSelect",
                    _divId : "devicesValueDiv"
                });
                combo1.make();

OK.瀏覽頁面控件會自動生成comboBox.在實際項目中若是須要填入相關的數據.能夠本身把select裏面的option數據進行替換便可!

 

 

附上核心代碼以便查看批評:

/**
 * @author  UFO
 */
function log(a) {
    console.log(a);
}

function Combobox(config) {
    if(config) {
        this.inputId = config._inputId || "";
        this.selectId = config._selectId || "";
        this.divId = config._divId || "";
    }
    this.divObj = $("#" + this.divId);
    this.inputObj = $("#" + this.inputId);
    this.selectObj = $("#" + this.selectId);
    this.widthInit = 200;
    this.inputWidth = this.widthInit - 20;
    this.divHeigth = $("#" + this.divId).height() - 41;

    this.make = function() {
        this.setSelectEvent(this);
        this.setInputEvent(this);
        this.setMouseEvent(this);
    };
    this.setMouseEvent = function(_self) {
        if($("body").data("comboDivs")) {
            var comboDivs = $("body").data("comboDivs");
            comboDivs.push(_self);
            $("body").data("comboDivs", comboDivs);
        } else {
            var comboDivs = new Array();
            comboDivs.push(_self);
            $("body").data("comboDivs", comboDivs);
        }

        function mouseCoords(ev) {
            if(ev.pageX || ev.pageY) {
                return {
                    x : ev.pageX,
                    y : ev.pageY
                };
            };
            return {
                x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y : ev.clientY + document.body.scrollTop - document.body.clientTop
            };
        };
        document.onmousedown = function(ev) {
            var ev = ev || window.event;
            var mousePos = mouseCoords(ev);
            var comboDivs = $("body").data("comboDivs");
            for(var i = 0; i < comboDivs.length; i++) {
                var _self = comboDivs[i];
                var selectDiv = $("#select_div_on_key" + _self.selectId);
                if(selectDiv.get(0)) {
                    var osx = selectDiv.offset().left;
                    var oex = selectDiv.offset().left + selectDiv.width();
                    var osy = selectDiv.offset().top;
                    var oey = selectDiv.offset().top + selectDiv.height();
                    // $("#info").html(mousePos.x + "  " + mousePos.y + "<br>" + "osx:" + osx + "  oex:" + oex + "<br>" + "osy:" + osy + "  oey:" + oey);
                    // $("#info").append((mousePos.x < osx) + "  " + (mousePos.x > oex) + "   " + (mousePos.y < osy) + "   " + (mousePos.y > oey));
                    if((mousePos.x < osx || mousePos.x > oex) || (mousePos.y < osy || mousePos.y > oey)) {
                        _self.removeSelectDiv(_self.selectId);
                    }
                }
            };
        }
    };
    this.setSelectEvent = function(_self) {
        var _self = _self;
        $("#" + _self.selectId).change(function() {
            var newvar = $("#" + _self.selectId).find("option:selected").text();
            $("#" + _self.inputId).val(newvar);
        }).click(function() {
            $("#select_div_on_key" + _self.selectId).remove();
        }).css({
            "display" : "block",
            "width" : _self.widthInit + "px",
            "z-index" : 1,
            "clip" : "rect(0px " + _self.widt + "px 51px 151px)"
        });
    };
    this.setInputEvent = function(_self) {
        var _self = _self;
        var aa = this;
        //這裏須要傳入對象,這裏須要強調.若是不傳入,jquery的事件處理函數沒法獲得this.由於事件處理函數裏面的this是那個DOM元素.並且事件處理函數裏面只能訪問到他所在函數裏面的數據.這是閉包嗎?
        $("#" + _self.inputId).keyup(function() {
            // _self.keyupFlag = 1;
            _self.ShowSelectCombo(_self);
        }).click(function() {
            _self.ShowSelectCombo(_self);
        }).css({
            "z-index" : 2,
            "width" : this.inputWidth + "px"
        });
    };
    this.removeSelectDiv = function(selectId) {
        var ulDIV = $("#select_div_on_key" + selectId);
        ulDIV.remove();
    };
    this.hideSelectDiv = function(selectId) {
        var ulDIV = $("#select_div_on_key" + selectId);
        ulDIV.hide();
    };
    this.ShowSelectCombo = function(_self) {
        console.log("---------------")
        var _self = _self;
        //這裏爲何不能用this?由於在click事件裏面的this是元素本身.因此先把context上下文_self又傳進來處理.
        var inputObjVal = _self.inputObj.val();
        var inputObjOffset = _self.inputObj.offset();
        var inputObjWidth = _self.inputObj.width() + 20;
        var html = "";
        if(inputObjVal == "") {
            html = "<div class='select_div_list' id='select_div_on_key" + _self.selectId + "' style='display:none;position:absolute;width:" + inputObjWidth + "px;margin-top:" + _self.inputObj.outerHeight() + "px;z-index:1000;'><ul class='select_div_list_ul'>";
        } else {
            html = "<div class='select_div_list' id='select_div_on_key" + _self.selectId + "' style='position:absolute;width:" + inputObjWidth + "px;margin-top:" + _self.inputObj.outerHeight() + "px;z-index:1000;'><ul class='select_div_list_ul'>";
            $("#" + _self.selectId).find("option").each(function() {
                var tk = $(this);
                if(tk.html().indexOf(inputObjVal) != -1) {
                    html += "<li val='" + tk.val() + "' ht='" + encodeURIComponent(tk.html()) + "'>" + tk.html() + "</li>";
                }
            });
        }

        html += "</ul></div>";
        _self.removeSelectDiv(_self.selectId);
        _self.divObj.append(html);
        var ulDIV = $("#select_div_on_key" + _self.selectId);
        var hei = ulDIV.find("ul").height();
        var newHeight = hei > _self.divHeigth ? _self.divHeigth : hei;

        ulDIV.css({
            height : newHeight + "px"
        });
        ulDIV.find("li").hover(function() {
            $(this).css({
                "background-color" : "#079BD5"
            });
        }, function() {
            $(this).css({
                "background-color" : "white"
            });
        });
        ulDIV.find("li").click(function() {
            var _selfLi = $(this);
            var va = _selfLi.attr("val");
            var htm = _selfLi.attr("ht");
            htm = decodeURIComponent(htm);
            $("#" + _self.inputId).val(htm);
            $("#" + _self.selectId).val(va);
            ulDIV.remove();
        });
    };
}

由於OSCHINA我知道怎麼上傳附件.因此只能提供ITEYE的下載地址:

http://ufoqhmdt.iteye.com/blog/1676887