ajax 自动完成下拉框自动提示位置问题- AJAX技术

当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > ajax 自动完成下拉框自动提示位置问题

AJAX技术: ajax poller; 无框架 Ajax分页(原创); AJAX 图片展示框架56个提升开发效率; AJAX 客户端响应速度提高分析; 揭开AJAX神秘的面纱(AJAX个人学习笔记); Ajax Control Toolkit 34个服务器端控件; Ajax 核心框架函数及例子; AJAX 进度条实现代码; Unobtrusive的Web开发; ASP实例:ASP+AJAX制作无刷新新闻评论系统; Ajax和CSS设计的表格实例; css和Ajax制作的表格; AJAX结合CSS实现的网页Tab选项卡效果; 实现一个基于Ajax的调查程序; ASP.NET+AJAX解决网页打开等待问题; XMLHttpRequest和AJAX虎视Web应用开发; IBM Google等巨头联手支持Open Ajax计划; php+ajax文件上传进度条; AJAX技术 vs 传统的ASP无刷新技术; 利用ICallbackEventHandle实现类似AJAX的无刷新页面

No. « ‹ 13 14 15 16 › »

技术文章搜索

关键字

AJAX技术中的 ajax 自动完成下拉框自动提示位置问题

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-13 浏览: 131 ::

收藏到网摘: n/a

纯AJAX分页，V0.2版下载+演示完美ajax类　支持事件

复制代码代码如下:

 function divPosition(){ 
 var clx,cly; 
 clx=event.clientX; 
 cly = event.clientY; 
 objouter.style.top = clx+10; 
 objouter.style.left = cly+20; 
 objouter.style.width= getAbsoluteWidth(objInput) 
 } 
问题出在 
 objouter.style.top = clx+10; 
 objouter.style.left = cly+20; 
 objouter.style.width= getAbsoluteWidth(objInput); 
如果改成getAbsoluteTop(objInput); 
getAbsoluteLeft(objInput); 
在表格里的文本框输入东东就死IE了 
但我不知道怎么改 

点击运行可以看到效果:

层的位置不对
<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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

纯AJAX分页，V0.2版下载+演示完美ajax类　支持事件

AJAX技术 中的 ajax 自动完成下拉框 自动提示位置问题

评论 (0) All

AJAX技术中的 ajax 自动完成下拉框自动提示位置问题