急:求助,在线等

写了一点点，没写完，希望能给你点思路，采用模拟select的方法实现可输入的选择框
demo
a.html
-----------------------------------------------------------------------------------
<HTML>
<HEAD>
<style type="text/css"> .sltInput{ border-left:1px green solid; border-top :1px green solid; border-bottom:1px green solid; border-right:0px green solid; width:100; height:20; }
.sltButton{ border:1px green solid; width:20; height:20; }
.sltDiv{border-left:1px green solid;border-right:1px green solid;border-bottom:1px green solid;width:120;position:absolute}
</style>
<script language="javascript">
function Combox(ID)
{
var m_id = ID;
var m_datas = new Array();
var m_datas_length = 0;
var m_faceTemplate = "<input id=COMBOX_INPUT class=sltInput value=选择或输入 onfocus='this.text=this.value;this.value=\"\"' onblur='this.value=this.text'><input id=COMBOX_BUTTON type=button class=sltButton value=V>";
var m_sltdiv = null;
this.draw = function()
{
var html = m_faceTemplate.replace("COMBOX_INPUT","combox_input_"+ID).replace("COMBOX_BUTTON","combox_button_"+ID);
document.write(html);
document.getElementById("combox_button_"+ID).onclick = this.onComboxButtonClick;
}
this.onComboxButtonClick = function()
{
if(m_sltdiv!=null)
{
document.body.removeChild(m_sltdiv);
m_sltdiv=null;
return;
}
if(m_datas_length>0)
{
var posxy = findAbsolutePos(document.getElementById("combox_input_"+m_id));
var px = parseInt(posxy.split(",")[0]);
var py = parseInt(posxy.split(",")[1]);
m_sltdiv = document.createElement("<div class=sltDiv></div>");
m_sltdiv.style.pixelLeft = px;
m_sltdiv.style.pixelTop  = py+20;
var html = "";
html += "<table border=0 width=100% cellspacing=0 cellpadding=0 style=font-siez:12px>";
for(var i=0;i<m_datas_length;i++)
{
var op = m_datas[i];
html += "<tr><td onmouseover='this.style.background=\"blue\"' onmouseout='this.style.background=\"\"'><span>"+op.text+"</span></td></tr>";
}
html += "</table>";
m_sltdiv.innerHTML = html;
document.body.appendChild(m_sltdiv);

}
}
this.addItem = function( text,value )
{
var cOption = new ComboxOption( text,value );
m_datas.push( cOption );
this.selectedIndex = m_datas_length;
this.value = value;
this.text = text;
m_datas_length++;
}

var findAbsolutePos = function (e)
{
var x = 0;
var y = 0;

while(e&&e.id.toLowerCase()!="html")
{
var etn = e.tagName.toLowerCase();
if(etn!="tr"&&etn!="tbody")
{
x += e.offsetLeft;
y += e.offsetTop;
}
e = e.parentElement;
}
return x+","+y;
}

this.selectedIndex = -1;
this.value = null;
this.text = null; function ComboxOption( text,value )
{
this.text = text;
this.value = value;
}
}</script>
</HEAD>
<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">
<div style=position:absolute;top:100;left:200>
<script>
var n = new Combox("myCombox1");
n.draw();
n.addItem("first item",1);
n.addItem("second item",1);
n.addItem("third item",1); </script>
</div>
</body>
</HTML>
---------------------------------------------------------------------------------
<script language="javascript">
function aa() {
     i=document.frmtest.seltest.length;
}
function pp(){
document.frmtest.seltest.options[i]=new Option(ok=(document.frmtest.seltest.options[i])?document.frmtest.seltest.options[i].innerText+String.fromCharCode(event.keyCode):String.fromCharCode(event.keyCode),ok)
document.frmtest.seltest.selectedIndex=i;
}
function edit(){
if(document.frmtest.seltest.options[i]){
  if(event.keyCode==8){
   var str=document.frmtest.seltest.options[i].innerText;
   var len=str.length;
   document.frmtest.seltest.options[i].innerText=str.substring(0,len-1);
   if(document.frmtest.seltest.options[i].innerText=="")
    document.frmtest.seltest.remove(i);
   }
   if(event.keyCode==13)return false;
   if(event.keyCode==32){
   document.frmtest.seltest.options[i].innerText+=" ";
  }
}
}
</script>
<body onload=aa();>
得到的数据：<%=request.form("seltest")%>
<form name=frmtest action=test.asp method="POST">
<select onkeypress=pp() onkeyup="edit()" name="seltest">
<option>测试程序</option>
<option>nanaka</option>
<option>zergman</option>
</select>
<input type=submit>
</form>
</body>

调试易

急:求助,在线等

解决方案 »