ajax学习笔记之五 模拟google动态提示效果

上次因网络原因,没有写完,对于此前看过此文章的朋友表示歉意.

实现方式很简单,步骤如下:

1.点击文本框内后,获得文本框的x,y.

2.输入内容后,延迟1-2秒将请求发送至服务器端.

3.服务器端查询后,返回给客户端.

4.客户端显示DIV,并根据1获得的xy定位DIV的位置,将返回的内容填充至DIV内.

代码步骤如下:

(1)html

<inputid="Text1"style="width:300px;height:21px;"type="text"onkeyup="getA();"onclick="getxy(this);"/>

//getxy()代码,为将要显示的div确定位置

functiongetxy(e)

{

x=e.offsetTop;

y=e.offsetLeft;

while(e=e.offsetParent)

{

x+=e.offsetTop;

y+=e.offsetLeft;

}

}

(2)
//用户输入后,延迟1-2秒提交即可,以免造成服务器端负载.

functiongetQList()

{

vartime=newDate().getTime();

varval=document.getElementById("Text1").value;

if(val!=null||val!=""||val.length!=0)

{

varsend="action=get1&time="+time+"&val="+val;

myRequest("../Temp.aspx",send,getQListhandle);

}

}

//处理函数,创建表格,填充到div中,代码中的changeColor()是用于鼠标移动后改变颜色的.

functiongetQListhandle()

{

vargetXML=null;

if(req.readyState==4)

{

if(req.status==200)

{

getXML=req.responseXML;

varinnerHTML=null;

varnewslist=getXML.getElementsByTagName("news");

if((newslist!=null)&&(newslist.length!=0))

{

innerHTML="<tablestyle=/"font-size:9pt;width:100%/"cellpadding=/"0/"cellspacing=/"0/"border=/"0/">/r/n";

for(vari=0;i<newslist.length;i++)

{

varnews=newslist[i];

varid=(news.childNodes[0].firstChild==null)?"":news.childNodes[0].firstChild.data;

varcaption=(news.childNodes[1].firstChild==null)?"":news.childNodes[1].firstChild.data;

innerHTML+="<tronmouseover=/"changecolor1(this);/"onmouseout=/"changecolor2(this);/">";

innerHTML+="<tdheight='25'style=/"cursor:hand/"onclick=/"look2('"+id+"');/">"+caption+"</td>";

innerHTML+="</tr>";

}

innerHTML+="</table>/r/n";

}

else

{

//innerHTML+="暂时没有数据";

document.getElementById("list").innerHTML="";

document.getElementById("list").style.display="none";

}

setLocal();//注意,此处定位Div的位置

}

}

}

//(3)定位div,让div显示在文本框的下方,宽度等于文本框的宽度

functionsetLocal()

{

varlist=document.getElementById("list");

list.style.top=x+21;

list.style.left=y;

}

//服务器端代码不再赘述.基本原理就是这样实现,如果大家有更好的方式,麻烦留个言.谢谢.