ajax 自动完成下拉框 自动提示位置问题

层的位置不对




<script language="javascript">...


var intIndex=0;arrList = new Array();




function dearray(aa)//定义array




...{


//document.write(aa);


arrList = aa.split(',');


intIndex = arrList.length；




}






function test() ...{




init();


dearray("asp,csdn,aaaa,bbbbc,afd,werwe,adfs,ertr,qwq,qwqwq,trt,uyus,dsfs,uere,add,234,2,1dr4,ae4564,adf4645,afa3543,sdfse5,ae345345,sdf4564,34346536");




smanPromptList(arrList,"aspx");


dearray("1sdfsdf.com,a11sdafs.net,b22dsafsdf,c333asdfsadf,4444dsafasdf,dddsfddsafdsaf,121213dsafsdaf,43213asdfadsf,dsa3121dasf3,a213,323313,3213,32213,dsfsdddd,ds11dfsfd,ffdafd,afdfd,afd,baffad,2fda2fd,dasd");


smanPromptList(arrList,"aspx2");


smanPromptList(arrList,"inputer")


}




function init() ...{






if (arrList.constructor!=Array)...{alert('smanPromptList初始化失败:第一个参数非数组!');return ;}




arrList.sort( function(a, b) ...{


if(a.length>b.length)return 1;


else if(a.length==b.length)return a.localeCompare(b);


else return -1;


}


);


}








function smanPromptList(arrList,objInputId)...{


var objouter=document.getElementById("__smanDisp") //显示的DIV对象


var objInput = document.getElementById(objInputId); //文本框对象


var selectedIndex=-1;


var intTmp; //循环用的:)






if (objInput==null) ...{alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}


//文本框失去焦点




objInput.onblur=function()...{


objouter.style.display='none';


}


//文本框按键抬起


objInput.onkeyup=checkKeyCode;


//文本框得到焦点


objInput.onfocus=checkAndShow;




function checkKeyCode()...{


var ie = (document.all)? true:false




if (ie)...{


var keyCode=event.keyCode




if (keyCode==40||keyCode==38)...{ //下上


var isUp=false


if(keyCode==40) isUp=true ;


chageSelection(isUp)




}else if (keyCode==13)...{//回车


outSelection(selectedIndex);




}else...{


checkAndShow()


}




}else...{


checkAndShow()


}


divPosition()


}






function checkAndShow()...{


var strInput = objInput.value




if (strInput!="")...{


divPosition();


selectedIndex=-1;


objouter.innerHTML ="";




for (intTmp=0;intTmp<arrList.length;intTmp++)...{




if (arrList[intTmp].substr(0, strInput.length)==strInput)...{


addOption(arrList[intTmp]);


}


}


objouter.style.display='';




}else...{


objouter.style.display='none';


}




function addOption(value)...{


objouter.innerHTML +="<div onmouseover="this.className='sman_selectedStyle'" onmouseout="this.className=''" onmousedown="document.getElementById('"+objInputId+"').value='" + value + "'">" + value + "</div>"


}


}




function chageSelection(isUp)...{




if (objouter.style.display=='none')...{


objouter.style.display='';




}else...{


if (isUp)


selectedIndex++


else


selectedIndex--


}


var maxIndex = objouter.children.length-1;




if (selectedIndex<0)...{selectedIndex=0}




if (selectedIndex>maxIndex) ...{selectedIndex=maxIndex}




for (intTmp=0;intTmp<=maxIndex;intTmp++)...{






if (intTmp==selectedIndex)...{


objouter.children[intTmp].className="sman_selectedStyle";




}else...{


objouter.children[intTmp].className="";


}


}


}




function outSelection(Index)...{


objInput.value = objouter.children[Index].innerText;


objouter.style.display='none';


}




function divPosition()...{


var clx,cly;


clx=event.clientX;


cly = event.clientY;


objouter.style.top = cly+10;


objouter.style.left = clx+20;


objouter.style.width= getAbsoluteWidth(objInput)


}


}


document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");


document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");




function getAbsoluteHeight(ob)...{


return ob.offsetHeight


}




function getAbsoluteWidth(ob)...{


return ob.offsetWidth


}




function getAbsoluteLeft(ob)...{


var mendingLeft = ob .offsetLeft;




while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )...{


mendingLeft += ob .offsetParent.offsetLeft;


mendingOb = ob.offsetParent;


}


return mendingLeft ;


}




function getAbsoluteTop(ob)...{


var mendingTop = ob.offsetTop;




while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" )...{


mendingTop += ob .offsetParent.offsetTop;


ob = ob .offsetParent;


}


return mendingTop ;


}


</script>


<body onLoad="test()">


下拉提示跟着 MOuse 走的。。想把他改成在文本框下出来的那种怎么改


<input type="text" id="aspx">






<input type="text" id="aspx2">


<table width="970" border="0" align="center">


<tr>


<td><table width="100%" border="0" align="center">


<tr>


<td align="center" valign="middle"> </td>


</tr>


</table>


<table border="1" align="center"


cellspacing="1" bordercolor="#9CD7FF" id="table1" style="BORDER-COLLAPSE: collapse" >


<tr bgcolor="#99CCFF">


<td bgcolor="#CEE3FF"><font class="text">日期</font></td>


<td bgcolor="#FFFFFF"><input type="text" id="inputer"></td>


</tr>


<tr bgcolor="#99CCFF">


<td bgcolor="#CEE3FF"><font class="text">制造号码</font></td>


<td bgcolor="#FFFFFF"></td>


</tr>


<tr bgcolor="#99CCFF">


<td height="24" bgcolor="#CEE3FF"><font class="text">作业内容</font></td>


<td height="24" bgcolor="#FFFFFF"> </td>


</tr>


</table>




</td>


</tr>


</table>


</body>




本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/6706.htm