HTML可输可选下拉框实现的JavaScript脚本

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

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

源码引自：http://blog.csdn.net/cxzhq2002　

资源来自：/article/4139255.html

效果图：

//下拉框选项所对应的层的名字
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);
}
}

/**
* textObj:文本框
* seleObj:下拉框
* noteArr:noteArr 注釋數組，沒有可以不传或为null或空数组
*/
function showSelect(textObj,seleObj,arrNote){
textObject = textObj;

//保存全局注释，供其他方法使用
noteArr = arrNote;
var selectDivObj =document.getElementById(SELECT_DIV);
var noteDivObj =document.getElementById(NODE_DIV);
var seleObj =document.getElementById(seleObj);

///////鼠标移出下拉框层时
selectDivObj.onmouseout=function(){
//当鼠标移出选择层时，设置选择层为失去焦点状态
cursorInSelectDivObj=false;

//当鼠标移出选择层时，让文本框获取焦点
textObj.focus();
}

///////文本框失去焦点时
textObj.onblur=function(){
textObjectBlur(selectDivObj,noteDivObj);
}

///////鼠标经过下拉框层时
selectDivObj.onmouseover=function(){
//当鼠标移进选择层时，设置选择层为获得焦点状态
cursorInSelectDivObj=true;
}

///////文本框点击时
textObj.onclick=function(){
//设置下拉框对应层中的选项及位置
setSelectDivObj(textObj,selectDivObj,seleObj);

//设置注释层中的选项及位置
setNoteDivObj(textObj,null,selectDivObj,noteDivObj);

//自动匹配与模糊定位
autoMatch(textObj,selectDivObj);
}

///////文本框上输入时
textObj.onkeyup=function(){
//如果按的是Tab键时直接退出
if(event.keyCode==9){
return false;
}

if(event.keyCode==13){
enter(textObj,selectDivObj,noteDivObj);
return false;
}

//设置下拉框对应层中的选项及位置
setSelectDivObj(textObj,selectDivObj,seleObj);

//如果按了上下键时
if(event.keyCode == 38 || event.keyCode == 40 ){
var selectedOptionDiv = downOrUp(textObj,selectDivObj,noteDivObj,seleObj);
//设置注释层中的选项及位置
setNoteDivObj(textObj,selectedOptionDiv,selectDivObj,noteDivObj);
}else{
//设置注释层中的选项及位置
setNoteDivObj(textObj,null,selectDivObj,noteDivObj);
}

//自动匹配与模糊定位
autoMatch(textObj,selectDivObj);
}
}

// 隐藏遮挡ID为objID的对象（层）的所有select
function hiddenOverSelects(objID){
var sels = document.getElementsByTagName('select');
for (var i = 0; i < sels.length; i++){
if (obj1OverObj2(document.getElementById(objID), sels[i])){
sels[i].style.visibility = 'hidden';
}else{
sels[i].style.visibility = 'visible';
}
}
}

//判断obj1是否遮挡了obj2
function obj1OverObj2(obj1, obj2){
var pos1 = getObjPosition(obj1)
var pos2 = getObjPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = pos1.top - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = pos2.top - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;

if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
obj1Left >= obj2Right || obj1Top >= obj2Bottom)
result = false;
return result;
}

//文本框失去焦点时调用的方法
function textObjectBlur(selectDivObj,noteDivObj){
//如果点击了某个选项后，已设置选择层为失去焦点状态，此时选择层可以隐藏了
if(!cursorInSelectDivObj){
selectDivObj.style.display='none';
}

if(ie){
//恢复所有已被隐藏的下拉框
hiddenOverSelects(selectDivObj.id);
if(noteDivObj.style.display=='inline'){
noteDivObj.style.display=selectDivObj.style.display;
}

if(selectDivObj.style.display=='none'){
noteDivObj.style.display='none';
}
}
}

//设置下拉框对应层中的选项及层位置
function setSelectDivObj(textObj,selectDivObj,seleObj){
//如果已显示，则直接退出
if(selectDivObj.style.display=='inline'){
return false;
}

//如果文本框的id为空时，则要命名
for(var i=0;textObj.id=='';i++){
var tmpNm = "textSelect" + i;
textObj.id = (document.getElementById(tmpNm)==null)?tmpNm:'';
}

selectDivObj.style.left = getObjPosition(textObj).left;
selectDivObj.style.top = getObjPosition(textObj).top + textObj.offsetHeight;
selectDivObj.style.width = textObj.offsetWidth;
selectDivObj.style.height = '';
selectDivObj.style.overflowY = '';
selectDivObj.innerHTML=''

//读取select的项目放到Div里。
for(var x = 0; x<seleObj.options.length; x++){
selectDivObj.innerHTML+="<div onmouseover=\"optionDivOnmouseover(this,'"
+ textObj.id
+ "')\" style='width:100%;white-space: nowrap;cursor: default;'>"
+seleObj.options[x].text+"</div>";
}

//调整Div高度，过度显示滚动条
if(x > 8){
selectDivObj.style.height=13 * 8;
selectDivObj.style.overflowY='auto';
}else{
selectDivObj.style.height=15 * x;
selectDivObj.style.overflowY='auto';
}

selectDivObj.style.display='inline';
if(ie){
hiddenOverSelects(selectDivObj.id);
}
}

//设置下拉框对应层中的选项及层位置
function setNoteDivObj(textObj,optionDivObj,selectDivObj,noteDivObj){

//如果需要显示对应键的注释时
if(noteArr != null && noteArr != undefined){

//获取下拉框所对应的层的宽度与左边距
var regStr = new RegExp("(([0-9]+)px)");
selectDivObj.style.width.match(regStr);
var width=RegExp.$2;
regStr = new RegExp("(([0-9]+)px)");
selectDivObj.style.left.match(regStr);
var left= RegExp.$2;
//设置注释层的位置与大小
noteDivObj.style.left=parseInt(width) +parseInt(left);
noteDivObj.style.top=selectDivObj.style.top;
noteDivObj.style.width=width*1;
noteDivObj.style.height=selectDivObj.style.height;

var i = 0;

//如果找到对应的注释，则显示注释层
for(i = 0;i < noteArr.length;i++){
if(optionDivObj==null && textObj.value == noteArr[i][0]){
noteDivObj.innerText=noteArr[i][1];
noteDivObj.style.display="inline";
break;
}else if(optionDivObj !=undefined
&& optionDivObj !=null
&& optionDivObj.outerText == noteArr[i][0]){
noteDivObj.innerText=noteArr[i][1];
noteDivObj.style.display="inline";
break;
}
}

if(i==noteArr.length){
noteDivObj.innerText='';
noteDivObj.style.display="none";
}

}
}

//自动匹配选项中符合文本框中输入的值的记录
function autoMatch(textObj,selectDivObj){
if(textObj.value==''){
return null;
}

if(event.keyCode == 38 || event.keyCode == 40 ){
return null;
}

return autoMatch_(textObj,selectDivObj);
}

//String.fromCharCode
function autoMatch_(textObj,selectDivObj){
var objChilddiv=selectDivObj.getElementsByTagName("div");
var arr = new Array();
//清除所有层的样式
for(var x=0;x<objChilddiv.length;x++){
objChilddiv[x].style.cssText='';
}

var selectOptionDivObj = null;
var textValueReg = replaceReg(textObj.value);

for(var x=0;x<objChilddiv.length;x++){
var strChilddiv=(ie)?objChilddiv[x].outerText:textObj.textContent;
var regRegExp = new RegExp('^'+textValueReg);
//alert('^'+textValueReg + "   " + strChilddiv + "   " + textObj.value);

//先模糊匹配
if(regRegExp.test(strChilddiv)){
//让模糊匹配到的选项上移
selectDivObj.scrollTop=objChilddiv[x].offsetHeight*x;

//再精确匹配，且让精确匹配的成选中状态
if(strChilddiv==textObj.value){
arr[0]=objChilddiv[x];
arr[1]=x;
objChilddiv[x].style.cssText='background-color: #330066;color: #ffffff;';
break;
}else{
objChilddiv[x].style.cssText='';
}
break;
}else{
objChilddiv[x].style.cssText='';
}
textObj.focus();
}

return arr;
}

//上下翻
function downOrUp(textObj,selectDivObj,noteDivObj,seleObj){

//得到select下拉框所有option选项所对应的层
var objChilddiv=selectDivObj.getElementsByTagName("div");

if(objChilddiv.length == 0){
return null;
}
var selectedOptionDiv;

var hig = 0;
if(event.keyCode==38){
selectedOptionDiv = objChilddiv[objChilddiv.length -1];
hig = objChilddiv.length -1;
}else if(event.keyCode==40){
selectedOptionDiv = objChilddiv[0];
hig = 0;
}else{
selectedOptionDiv = objChilddiv[0];
}
var i=0;
//清空所有选项层的样式，即去掉原来背景为蓝色的选项层的样式
for(i=0; i < objChilddiv.length; i++){
if(objChilddiv[i].style.backgroundColor=='#330066'){
if(event.keyCode==38){
if(i != 0){
selectedOptionDiv = objChilddiv[i - 1];
hig = i - 1;
}else{
selectedOptionDiv = objChilddiv[objChilddiv.length - 1];
hig = objChilddiv.length -1;
}
}else if(event.keyCode==40){
if(i != (objChilddiv.length -1)){
selectedOptionDiv = objChilddiv[i + 1];
hig = i + 1;
}else{
selectedOptionDiv = objChilddiv[0];
hig = 0;
}
}
objChilddiv[i].style.cssText='';
break;
}
}

//解决用上下键弹出下拉列表时，让列表中与文本框相同值的选项选中
if(i==objChilddiv.length){

//自动匹配与模糊定位
var selectOption = autoMatch_(textObj,selectDivObj);

if(selectOption.length != 0){
//设置注释层中的选项及位置
setNoteDivObj(textObj,selectOption,selectDivObj,noteDivObj);
selectedOptionDiv = selectOption[0];
hig = selectOption[1];
}
}

selectDivObj.scrollTop=selectedOptionDiv.offsetHeight*hig;

//使本身选项层的背景为蓝色，字为白色，模拟选中样式
selectedOptionDiv.style.cssText='background-color: #330066;color: #ffffff;'

textObj.focus();

return selectedOptionDiv;
}

//回车
function enter(textObj,selectDivObj,noteDivObj){
if(selectDivObj.style.display=='none'){
return false;
}

//得到select下拉框所有option选项所对应的层
var objChilddiv=selectDivObj.getElementsByTagName("div");

if(objChilddiv.length == 0){
return false;
}
var selectedOptionDiv;

//清空所有选项层的样式，即去掉原来背景为蓝色的选项层的样式
for(var i=0; i < objChilddiv.length; i++){
if(objChilddiv[i].style.backgroundColor=='#330066'){
textObj.value=(ie)?objChilddiv[i].outerText:objChilddiv[i].textContent;
//回车时相当于点击了某个选项，此时设置选择层为失去焦点状态
//再调用文本框失去焦点方法textObjectBlur让选择层隐藏
cursorInSelectDivObj=false;
textObjectBlur(selectDivObj,noteDivObj);
break;
}
}
}

var regChars = new Array();
regChars[0]=new Array();
regChars[0][0]="$";
regChars[0][1]="\\$";
regChars[1]=new Array();
regChars[1][0]="(";
regChars[1][1]="\\(";
regChars[2]=new Array();
regChars[2][0]=")";
regChars[2][1]="\\)";
regChars[3]=new Array();
regChars[3][0]="*";
regChars[3][1]="\\*";
regChars[4]=new Array();
regChars[4][0]="+";
regChars[4][1]="\\+";
regChars[5]=new Array();
regChars[5][0]=".";
regChars[5][1]="\\.";
regChars[6]=new Array();
regChars[6][0]="[";
regChars[6][1]="\\[";
regChars[7]=new Array();
regChars[7][0]="?";
regChars[7][1]="\\?";
regChars[8]=new Array();
regChars[8][0]="]";
regChars[8][1]="\\]";
regChars[9]=new Array();
regChars[9][0]="^";
regChars[9][1]="\\^";
regChars[10]=new Array();
regChars[10][0]="|";
regChars[10][1]="\\|";
regChars[11]=new Array();
regChars[11][0]="{";
regChars[11][1]="\\{";
regChars[12]=new Array();
regChars[12][0]="}";
regChars[12][1]="\\}";
regChars[13]=new Array();
regChars[13][0]="\\";
regChars[13][1]="\\\\";

//代换正则表达式中特殊字符
function replaceReg(str){

//$()*+.[?]^|}{\
var regStr =/[$()*+.\[?\]^|}{\\]/g;

if(!str.match(regStr)){
return str;
}

var regArr =/./g;
var valueArr = str.match(regArr);
var tempStr = "";

for(var i = 0 ; i < valueArr.length; i++){
regStr =/[$()*+.\[?\]^|}{\\]/g;

if(valueArr[i].match(regStr)){
valueArr[i] = findByKey(valueArr[i])[1];
}

tempStr = tempStr + valueArr[i];
}

return tempStr;
}

//查询正则特殊字符要替换字符串
function findByKey(key){
var i = 0;
for(var i = 0; i < regChars.length; i++){
if(regChars[i][0]==key){
return regChars[i];
}
}
if(i == regChars.length ){
return null;
}
}

//在最后一个输入元素上按回车键时自动提交
function keydownOnSelectInput(){

if(event.srcElement.type == undefined){
return;
}
var type = event.srcElement.type.toLowerCase();
if(event.keyCode!=13
|| type=='button'
|| type=='submit'
|| type=='reset'
|| type=='textarea'
|| type==''){
return;
}

var noteDivObj =document.getElementById(NODE_DIV);
var selectDivObj =document.getElementById(SELECT_DIV);

if(event.srcElement.nextSibling != null
&& event.srcElement.nextSibling.type=='select-one'
&& selectDivObj.style.display=='inline'){

var objChilddiv=selectDivObj.getElementsByTagName("div");
var i=0;
for(i=0; i < objChilddiv.length; i++){
if(objChilddiv[i].style.backgroundColor=='#330066'){
break;
}
}

//在可选可输入文本框上按回车时，如果下拉列表中没有选中项，则直接跳到下一输入元素
if(i == objChilddiv.length){
cursorInSelectDivObj=false;
textObjectBlur(selectDivObj,noteDivObj);
event.keyCode=9;
}else{
event.returnValue=false;
}
return;
}

var srcForm = event.srcElement.form;

if(srcForm == undefined || srcForm == null){
return ;
}

var srcForm = event.srcElement.form;
var srcElementNext = null;

var allElems = srcForm.elements;
for(var i = 0; i < allElems.length; i++){
if(event.srcElement == allElems[i]){
if(!isLastElem(allElems,i+1)){
event.keyCode=9;
break;
}else {
if(event.srcElement.type=='select-one'){
var subButton = findSubmitButton(allElems,i);
if(subButton !=null){
subButton.click();
}
}
}
}
}

}

//查找提交按钮
function findSubmitButton(allElems,index){
for(var i = index; i < allElems.length; i++){
if(allElems[i].type=='submit'){
return  allElems[i];
}
}

return null;
}

//判断是否是最后一个元素
function isLastElem(allElems,index){

if(index >=allElems.length || allElems[index].type=="submit" ){
return true;
}

for(var i = index; i < allElems.length; i++){
var tempObj = allElems[i];
while(tempObj != window.document.body){
//如果该元素未隐藏，则判断父元素是否隐藏
if(tempObj.style.display != 'none'){
tempObj=tempObj.parentElement;
}else{
//如果输入元素隐藏，则递归查找其他输入元素是否隐藏
return isLastElem(allElems,i+1);
}
}

//如果某输入元素本身未隐藏，且其父也未隐藏，则不是最后一输入元素
if(tempObj == window.document.body){
return false;
}
}
}

//自动绑定按键事件
window.document.onkeydown = keydownOnSelectInput;
window.onresize=function(){
if(textObject){
textObject.blur();
}
}