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 οnmοuseοver=”this.className=’sman_selectedStyle'” οnmοuseοut=”this.className=”” οnmοusedοwn=”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