javascript實現可編輯的下拉框

          曾經遇到過一個需求的狀況是這樣的，咱們提供給用戶的輸入框的可選擇項只能知足用戶的大部分狀況的選擇，可是有時候會遇到一些用戶想要輸入的數據是下拉項中所沒有的，而用戶不但願改變下拉項爲輸入框模式，須要說若是實在沒法知足時，容許用戶進行輸入。由此產生了一個既能夠實現下拉選擇，又能夠輸入的下拉框功能。如下是我實現的代碼：

 

/*-------------------------------------------------------------------------------------------
	函數名稱：jsLab_CreateSelectInput()
	函數功能：建立支持下拉輸入框對象
	函數參數:
			  selectId	       下拉對象id
			  inputTextName	       輸入框name屬性
			  inputTextInitValue   輸入框默認值
	函數輸出：
			  生成支持下拉的輸入框，既能夠輸入又能夠下拉選擇
-------------------------------------------------------------------------------------------*/
function jsLab_CreateSelectInput(selectId, inputTextName, inputTextInitValue)
{
	/*判斷傳入的下拉參數是下拉對象仍是下拉框id*/
	var selectDom		= typeof(selectId) == "object" ? selectId : document.getElementById(selectId);
	
	/*若下拉框沒有name屬性則給下拉框建立name屬性*/
	if(!selectDom.name)
	{
		selectDom.name = selectDom.id;
	}

    if(typeof(inputTextName) == "undefined")
    {
		inputTextName		= selectDom.name + "InputText";
    }

    if(typeof(selectDom.parentNode) == "undefined")
    {
        return false;
    }
	/*下拉框所在的父節點以及父節點的定位位置*/
	var selectParent			= selectDom.parentNode;
    // store the raw position of selectDom's parent
    var selectParentRawWidth	= selectParent.offsetWidth;
    var selectParentRawHeight	= selectParent.offsetHeight;

    // clip the selectDom
    if(selectDom.style.position != "absolute")
    {
        //selectDom.style.position = "absolute";
    }
    // store the raw position of selectDom
    var selectRawTop			= selectDom.offsetTop;
    var selectRawLeft			= selectDom.offsetLeft;

    var selectOffsetWidth		= selectDom.offsetWidth;
    var selectOffsetHeight		= selectDom.offsetHeight;

	/*設置下拉框可視部分*/
    selectDom.style.clip		= "rect(0px, "+ selectOffsetWidth +"px, "+ selectOffsetHeight +"px, "+(selectOffsetWidth - 4)+"px )";
		
	/*判斷下拉框是否存在inputText屬性*/
    if(typeof(selectDom.inputText) == "undefined")
    {
        var oInputText		= document.createElement("input");

        /*define the oInputText's style value for different browsers, 定義在不一樣瀏覽器下輸入框的渲染樣式*/
        var inputTextHeight				= selectOffsetHeight - 1;
        var inputTextBorderWidth		= 2;
        var inputTextBorderStyle		= "inset";
        var inputTextBorderColor		= "threedlightshadow";
        var inputTextBorderBottomColor	= inputTextBorderColor;
        var inputTextFontSize			= selectOffsetHeight - 7;

        if(navigator && navigator.userAgent.toLowerCase())
        {
            var navigatorInfo = navigator.userAgent.toLowerCase();

            if(navigatorInfo.indexOf("opera") >= 0)
            {
                inputTextHeight				+= 1;
                inputTextBorderWidth		= 1;
                inputTextBorderStyle		= "ridge";
                inputTextBorderColor		= "threedlightshadow";
                inputTextFontSize			+= 1;
            }
            else if(navigatorInfo.indexOf("firefox") >= 0)
            {
				inputTextHeight				-= 2;	
                inputTextBorderBottomColor	= "threeddarkshadow";
            }
			 else if(navigatorInfo.indexOf("ie") >= 0)
            {
				inputTextHeight				-= 2;	
                inputTextBorderBottomColor	= "threeddarkshadow";
            }
            else
            {
                inputTextFontSize			= inputTextFontSize - 1;
            }
        }


        // reset the position of select_parent
        //selectParent.style.width	= (selectParentRawWidth - 4)+"px";
        //selectParent.style.height	= (selectParentRawHeight)+"px";

        // define the clip input's style,定義輸入框的可視樣式
        oInputText.style.display			= "block";
        oInputText.style.position			= "absolute";
        oInputText.style.width				= (selectOffsetWidth - 20)	+ "px";
		oInputText.style.height				= inputTextHeight			+ "px";
		//oInputText.style.top				= selectRawTop 				+ "px";
        //oInputText.style.left				= selectRawLeft				+ "px";
        oInputText.style.fontSize			= inputTextFontSize			+ "px";
        oInputText.style.paddingLeft		= "2px";
		oInputText.style.borderWidth		= inputTextBorderWidth		+ "px";
        oInputText.style.borderStyle		= inputTextBorderStyle;
        oInputText.style.borderColor		= inputTextBorderColor;
        oInputText.style.borderBottomWidth	= "1px";
        oInputText.style.borderBottomColor	= inputTextBorderBottomColor;
        oInputText.style.borderRightWidth	= "0";
		oInputText.name						= inputTextName;
		oInputText.title					= "支持手工輸入方式，也能夠下拉選擇方式！";
		
        selectDom.inputText					= oInputText;
		
    }
    else
    {
        var oInputText						= selectDom.inputText;
    }

	/*將輸入框對象插入到下拉框前面*/	
    selectParent.insertBefore(oInputText,selectDom);
	
	/*將下拉框中選中的值初始化到輸入框中*/
    jsLab_SetSelectInputValue(selectDom, inputTextInitValue);
	
	/*給下拉綁定監聽事件, 當下拉變化時，將下拉框的值初始化到輸入框中*/
	if(selectDom.attachEvent)
    {
		/*支持非火狐瀏覽器*/
        selectDom.attachEvent("onchange",function(){
				jsLab_BuildSelectInput(selectDom,selectOffsetWidth,selectOffsetHeight);
		});
    }
    else
    {
		/*僅支持火狐瀏覽器*/	
        selectDom.addEventListener("change",function(){
			jsLab_BuildSelectInput(selectDom,selectOffsetWidth,selectOffsetHeight);
		},false);
    }
}

/*-------------------------------------------------------------------------------------------
	函數名稱：jsLab_BuildSelectInput()
	函數功能：根據下拉框的選擇變化將下拉框的值賦到輸入框中
	函數參數:
			  selectDom			: 下拉對象id
	函數輸出：
-------------------------------------------------------------------------------------------*/
function jsLab_BuildSelectInput(selectDom,selectOffsetWidth,selectOffsetHeight)
{
    var selectedOption	= selectDom.options[selectDom.selectedIndex];
    var oInputText		= selectDom.inputText;

    if(typeof(selectedOption.innerText) == "undefined")
    {
        oInputText.value = selectedOption.text;
    }
    else
    {
        oInputText.value = selectedOption.innerText;
    }

    oInputText.style.display			= 'inline';
    oInputText.style.color				= "highlighttext";
    oInputText.style.backgroundColor	= "highlight";
    selectDom.style.clip				= "rect(0px, "+ selectOffsetWidth +"px, "+ selectOffsetHeight +"px, "+(selectOffsetWidth - 19)+"px )";
	
	/*給輸入框綁定click事件*/
    oInputText.onclick = function()
    {
        oInputText.style.backgroundColor	= "";
        oInputText.style.color				= "";
    };
	/*給下拉框綁定與輸入相同事件*/
    selectDom.onblur						= oInputText.onclick;
}

/*-------------------------------------------------------------------------------------------
	函數名稱：jsLab_SetSelectInputValue()
	函數功能：將下拉框中選中的值初始化到新建立的輸入框中
	函數參數:
			  selectDom			: 下拉對象id
			  inputTextInitValue：輸入框默認值
	函數輸出：
-------------------------------------------------------------------------------------------*/
function jsLab_SetSelectInputValue(selectDom, inputTextInitValue)
{
    var selectedOption					= selectDom.options[selectDom.selectedIndex];

    if(typeof(selectedOption.innerText) == "undefined")
    {
        selectDom.inputText.value = inputTextInitValue.length  > 0 ? inputTextInitValue : selectedOption.text;
    }
    else
    {
        selectDom.inputText.value = inputTextInitValue.length > 0 ? inputTextInitValue : selectedOption.innerText;
    }
}