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

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

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

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

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

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

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

代码步骤如下:

(1)html

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

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

function getxy(e)

{

  x=e.offsetTop;

  y=e.offsetLeft;

  while(e=e.offsetParent)

  {

   x+=e.offsetTop;

   y+=e.offsetLeft;

   }

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

{

   var time=new Date().getTime();

  var val=document.getElementById("Text1").value;

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

   {

   var send="action=get1&time="+time+"&val="+val;

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

   }

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

{

   var getXML=null;

   if(req.readyState==4)

   {

       if(req.status==200)

       {

           getXML=req.responseXML;

            var innerHTML=null;

            var newslist = getXML.getElementsByTagName("news");

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

             {

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

               

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

                {

                    var news = newslist[i];

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

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

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

                    innerHTML += "<td  height='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显示在文本框的下方,宽度等于文本框的宽度
function setLocal()

{ 

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

    list.style.top=x+21;

    list.style.left=y;

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