//     描述             :   HTML   ComboBox   可编辑下拉框 
//     版本             :   0.2 
//     作者             :   Brook   Qin(brook_qin@163.com) 
//     最新更新     :   2003-12-27 
//     备注             :   在CSDN上看到梅花雪的ComboBox，也想自己做一个，这个就是了 
//	 因为水平比较烂，只能做到这样了。 

<PUBLIC:COMPONENT> 
<PUBLIC:ATTACH   EVENT= "oncontentready "   ONEVENT= "boxInit() "   /> 
<PUBLIC:ATTACH   EVENT= "onchange "   ONEVENT= "setbox() "   /> 

<script   language= "JavaScript "> 
var   selectBox,   sSpanSelect,   oSpanInput,   oInput; 
var   thread           =   0; 
var   selectedId   =   -1; 

function   boxInit(){ 
var   oLeft,   oTop,   oWidth; 
oLeft     =   element.offsetLeft; 
oTop       =   element.offsetTop; 
oWidth   =   element.offsetWidth; 

//创建对象 
selectBox       =   element; 
oSpanSelect   =   element.document.createElement( "span "); 
oSpanInput     =   element.document.createElement( "span "); 
oInput             =   element.document.createElement( "input "); 
var   oBlank     =   element.document.createElement( "span ");         //这个是占位符 

oSpanSelect.style.cssText   =   "position:absolute;   top: "+oTop+ "px;   left: "+oLeft+ "px;   width: "+oWidth+ "px;   font-size:9pt;clip:rect(0   "+oWidth+ "   20   "+(oWidth-16)+ "); "; 
oSpanInput.style.cssText     =   "position:absolute;   top: "+(oTop-1)+ "px;   left: "+oLeft+ "px; "; 
oInput.style.cssText             =   "width: "+(oWidth-14)+ "px;   font-size:9pt; "; 
oBlank.style.cssText             =   "width: "+oWidth+ "px;   height:20px; "; 

selectBox.insertAdjacentElement( "beforeBegin ",oBlank); 
element.document.body.appendChild(oSpanSelect); 
oSpanSelect.appendChild(selectBox); 
element.document.body.appendChild(oSpanInput); 
oSpanInput.appendChild(oInput); 

//添加行为 
oInput.attachEvent( "onpropertychange ",   inputBoxChg); 
oInput.attachEvent( "onblur ",   boxBlur); 
oInput.attachEvent( "onfocus ",   boxFocus); 

setbox(); 
} 

function   setbox(){ 
oInput.value   =   selectBox.options[selectBox.selectedIndex].text; 
if(event.srcElement.tagName   ==   "SELECT ")   oInput.select(); 
} 

function   inputBoxChg(){ 
if(thread   ==   1){ 
selectBox.options[selectBox.length]   =   new   Option(oInput.value,   oInput.value); 
selectedId   =   selectBox.length-1; 
thread   =   2; 
selectBox.options[selectedId].text     =   oInput.value; 
selectBox.options[selectedId].value   =   oInput.value; 
}else   if(thread   ==   2)   { 
selectBox.options[selectedId].text     =   oInput.value; 
selectBox.options[selectedId].value   =   oInput.value; 
} 
} 

function   boxFocus(){ 
thread           =   1; 
selectedId   =   selectBox.selectedIndex; 
} 

function   boxBlur(){ 
thread   =   0; 
selectBox.selectedIndex   =   selectedId; 
for(i=0;   i <selectBox.length;   i++){ 
if(selectBox.options[i].text   ==   selectBox.options[selectedId].text   &&   i!=selectedId){ 
selectBox.options[selectedId]   =   null; 
selectBox.selectedIndex   =   i; 
setbox(); 
break; 
} 
} 
selectedId   =   -1; 
} 
</script> 
</PUBLIC:COMPONENT>