ComboBox

jstfsklh211 0 Tallied Votes 356 Views Share

to create a new comboBox
when you post your form checkbox_name will contain the selected value

$(document).ready(function() {
    var cb = "checkbox_name";
    comboBox(document.getElementById(cb+"CB"), cb);
    var sel = myForm.elements[cb+"_hold"];
    sel.length = 0;
    //add options 
    sel.options[sel.options.length] = new Option("text", "value");
});
<div id="checkbox_name"></div>
var comboBoxFlag;
function dropDown(myForm, boxName)
{
    if ((myForm.elements[boxName+"_txt"].value).length > 2)
    {
        var sel = myForm.elements[boxName+"_show"]
        sel.style["width"] = "auto";
        sel.style["display"] = "inline";
        sel.style["position"] = "relative";
    }
}
function pullUp(myForm, boxName, width)
{
    var sel = myForm.elements[boxName+"_show"]
    window.setTimeout(function (){
        if(document.activeElement == sel && sel.selectedIndex == -1){
        }else{
            sel.style["display"] = "none";
            sel.style["width"] = width+"px";
        }
    }, 250);
}
function keyPressed(event) {
    if (window.event) {
        return window.event.keyCode;
    } else if (event.keyCode) {
        return event.keyCode;
    } else {
        return false;
    }
}
function cbUpdate(myForm, boxName)
{
    if ((myForm.elements[boxName+"_txt"].value).length > 2)
    {
        var opt;
        var sel = myForm.elements[boxName+"_show"]
        sel.length = 0;

        opt = document.createElement( "option" );
        opt.setAttribute("value", "0");
        optTxt = document.createTextNode(myForm.elements[boxName+"_txt"].value);
        opt.appendChild(optTxt);
        sel.appendChild(opt);

        var hold = myForm.elements[boxName+"_hold"]
        for(i = 0; i < hold.length; i++)//or use ajax
        {
            if (((hold[i].text).toUpperCase()).indexOf((myForm.elements[boxName+"_txt"].value).toUpperCase()) != -1)
            {
                opt = document.createElement( "option" );
                opt.setAttribute("value", hold.options[i].value);
                optTxt = document.createTextNode(hold.options[i].text);
                opt.appendChild(optTxt);
                sel.appendChild(opt);
            }
        }
        hold.selectedIndex = "";
    }
}
function cbAjaxUpdate(myForm, boxName, ajCbPage, callFunc)
{
    if ((myForm.elements[boxName+"_txt"].value).length > 2)
    {
        var sel = myForm.elements[boxName+"_show"]
        sel.length = 0;
        sel.options[sel.options.length] = new Option(myForm.elements[boxName+"_txt"].value, "");
        if(!ajaxPost) alert("jqueryAjaxClass Required");
        ajaxPost(ajCbPage, [['callFunc', callFunc], [boxName, myForm.elements[boxName+"_txt"].value]], function(){eval(xmlDoc);});
    }
}
function cbSelect(myForm, boxName, curName)
{
    var sel = myForm.elements[boxName+"_show"]
    if(curName != boxName+"_txt")
    {
        if(sel.selectedIndex < 0 || sel.selectedIndex > sel.length)
        {
            return;
        }
        myForm.elements[boxName+"_txt"].value = sel.options[sel.selectedIndex].text;
        myForm.elements[boxName].value = sel.options[sel.selectedIndex].value;
    }
}
function ajaxComboBox(div, boxName, myForm, ajCbPage, callFunc, width, size, top)
{
    comboBox(div, boxName, width, size, top)
    cbInput = myForm.elements[boxName+"_txt"];
    cbInput.onfocus = function(){
        dropDown(this.form, boxName);
        cbAjaxUpdate(this.form, boxName, ajCbPage, callFunc);
    };
    cbInput.onkeyup = function(event){
        cbAjaxUpdate(this.form, boxName, ajCbPage, callFunc);
        dropDown(this.form, boxName);
    };
}
function comboBox(div, boxName, width, size, top)
{
    comboBoxFlag = false;
    if ( width === undefined ) {
        width = 150;
    }
    if ( size === undefined ) {
        size = 5;
    }
    if ( top === undefined ) {
        top = 20;
    }

    div.className = "comboBox";
    div.style["width"] = width+"px";
    div.style["margin"] = "0 10px 5px 0";
    div.style["padding"] = "0 4px 0 0";
    div.style["backgroundColor"] = "#ffffff";
    div.style["height"] = "20px";

    var cbInput = document.createElement( "input" );

    cbInput.type = "text";
    cbInput.name = boxName+"_txt";
    cbInput.id = boxName+"_txt";
    cbInput.style["width"] = width+"px";
    cbInput.setAttribute('autocomplete', 'off');
    cbInput.onfocus = function(){
        dropDown(this.form, boxName);
        cbUpdate(this.form, boxName);
    };
    cbInput.onkeyup = function(event){
        cbUpdate(this.form, boxName);
        dropDown(this.form, boxName);
    };
    cbInput.onkeypress = function(event){
        keycode = keyPressed(event);
        if(keycode == 13)
        {
            pullUp(this.form, boxName, width);
            var e = event || window.event;
            e.cancelBubble = true;
            if (e.stopPropagation) e.stopPropagation();
            return false;
        }
    }
    cbInput.onblur = function(event){
        pullUp(this.form, boxName, width);
    };

    div.appendChild(cbInput);
    cbInput = document.createElement( "input" );

    cbInput.type = "hidden";
    cbInput.name = boxName;
    cbInput.id = boxName;

    div.appendChild(cbInput);
    cbInput = document.createElement( "select" );

    cbInput.name = boxName+"_show";
    cbInput.id = boxName+"_show";
    cbInput.style["width"] = (width-15)+"px";
//    cbInput.style["top"] = top+"px";
    cbInput.style["display"] = "none";
    cbInput.size = size;
    cbInput.onfocus = function(){
        dropDown(this.form, boxName);
    };
    cbInput.onchange = function(event){
        pressed = keyPressed(event);
        if (pressed == 38 || pressed == 40)
            return true;
        cbSelect(this.form, boxName, this.name);
        pullUp(this.form, boxName, width);
    };
    cbInput.onblur = function(){
        pullUp(this.form, boxName, width);
    };
    var opt = document.createElement( "option" );
    opt.setAttribute("value", "");
    optTxt = document.createTextNode("");
    opt.appendChild(optTxt);
    cbInput.appendChild(opt);

    div.appendChild(cbInput);
    cbInput = document.createElement( "select" );

    cbInput.name = boxName+"_hold";
    cbInput.id = boxName+"_hold";
    cbInput.style["display"] = "none";

    div.appendChild(cbInput);
    comboBoxFlag = true;
}
function comboBoxReady() {
    return comboBoxFlag;
}