HTML可输可选下拉框实现的JavaScript脚本
HTML可输可选下拉框实现的JavaScript脚本
关键字: javascript html可输可选下拉框
在写页面时,我们有时会有这样的需求,要下拉框可选可输入,该脚本就是可输可选控件.该脚本是根据网上某大侠源脚本改编而成,现记录在此,以备后用.

新增功能： 支持模糊定位、支持上下箭选择、支持注释层功能、支持按回车键从下拉框中选择选项   

Js代码

//下拉框选项所对应的层的名字   
var SELECT_DIV="SELECT_DIV_";   
  
//注释层的名字   
var NODE_DIV="NODE_DIV_";   
var textObject;   
  
//焦点是否在选择层上:初始时为false,表示默认不在选择层上   
//主要防止鼠标点击选择项时，文本框会失去焦点，这样选择层就会跟着隐藏，此时还未   
//让点击的选择项选中并赋值到文本框中去。此时可以设置鼠标在选择层上时cursorInSelectDivObj=ture   
//这时点击时不会立即隐藏选择层，等选中后再设置cursorInSelectDivObj=false，此时就可以隐藏选择层了   
var cursorInSelectDivObj=false;   
  
//是否是ie浏览器   
var ie=(document.getElementById && document.all);   
  
//全局的注释数组   
var noteArr = new Array();   
  
  
//以防名字已存在，循环取名，先判断是否存在"Textselectshow_Div"的对象，   
//如果存在，则重新取名为"Textselectshow_Div1"，如果"Textselectshow_Div1"   
//还是存在，则取名为"Textselectshow_Div2"，依次类推:"Textselectshow_Div..."   
for(var i=0;document.getElementById(SELECT_DIV)!=null;i++){    
    var tmpNm = SELECT_DIV + i;   
    //如果存在同名的，则以重新取名为 Textselectshow_Div + i ，如果Textselectshow_Div + i   
    //存在，则循环取名为 Textselectshow_Div + i + 1，直到不重名为止。如果存在，则赋值为本身再循环   
    SELECT_DIV=(document.getElementById(tmpNm)==null)?tmpNm:SELECT_DIV;   
}   
  
//以同样的命名方式为注释层取名   
for(var i=0;document.getElementById(NODE_DIV)!=null;i++){   
    var tmpNm = NODE_DIV + i;   
    NODE_DIV=(document.getElementById(tmpNm)==null)?tmpNm:NODE_DIV;   
}   
  
//为隐藏下拉框创建一个对应的层，并且刚初始化时为隐藏的   
document.write ('<div id="' + SELECT_DIV + '" style="position: absolute;'  
                                + 'cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')   
//同样方式创建一个注释层   
document.write ('<div id="' + NODE_DIV + '"  style="position: absolute;'  
                                + 'cursor: default;border: 1px solid #B2B2B2;background-color:#ffffd9;display: none;'  
                                + 'overflow-x:auto;word-wrap:break-word"></div>')   
  
// 获取某对象的坐标   
function getObjPosition(Obj){   
    try{           
        var sumTop=0;   
        var sumLeft=0;   
           
        while(Obj!=window.document.body){   
            sumTop+=Obj.offsetTop;   
            sumLeft+=Obj.offsetLeft;       
            Obj=Obj.offsetParent;   
        }   
        return {left:sumLeft,top:sumTop};   
    }catch(e){alert(e);}   
}   
  
//处理Div中的选项/* 某个选项，文本框的ID */   
function optionDivOnmouseover(optionDivObj,textId){   
    //文本框   
    var textObj=document.getElementById(textId);   
  
    //optionDivObj.parentNode为某select option选项所对应层的父对象，即SELECT_DIV层   
    //得到select下拉框所有option选项所对应的层   
    var objChilddiv=optionDivObj.parentNode.getElementsByTagName("div");   
       
    //清空所有选项层的样式，即去掉原来背景为蓝色的选项层的样式   
    for(var i=0; i < objChilddiv.length; i++){   
        objChilddiv[i].style.cssText='';   
    }   
       
    //使本身选项层的背景为蓝色，字为白色，模拟选中样式   
    optionDivObj.style.cssText='background-color: #330066;color: #ffffff;'  
       
    var noteDivObj =document.getElementById(NODE_DIV);   
    var selectDivObj =document.getElementById(SELECT_DIV);   
       
    ///////设置注释层中的选项及位置   
    setNoteDivObj(textObj,optionDivObj,selectDivObj,noteDivObj);       
    
    //点击某个选项层时   
    optionDivObj.onclick=function(){   
  
        //点击选项后选择层后要隐藏，即要设置成失去焦点状态   
        cursorInSelectDivObj=false;   
           
        //把选中的某选项层的内容赋值为文本框   
        if(ie){   
            textObj.value=optionDivObj.outerText;      
        }   
        else  
        {   
            textObj.value=optionDivObj.textContent;   
        }   
           
        //var noteDivObj =document.getElementById(NODE_DIV);   
           
        //点击某个选项层时，对应的注释层也要隐藏   
        noteDivObj.style.display='none';           
  
        //点击过后使文本框获取焦点   
        textObj.focus();   
  
        ////////调用文本框失去焦点触发的方法   
        textObjectBlur(selectDivObj,noteDivObj);           
    }   
}   
  
/*