ajax 模拟google动态提示效果

 

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

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

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

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

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

　　代码步骤如下:

以下为引用的内容： <input id="Text1" style="width: 300px; height: 21px;" type="text"  onkeyup="getA();" onclick="getxy(this);"/>

以下为引用的内容：

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

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

{  

    x=e.offsetTop;  

   y=e.offsetLeft;  

  while(ee=e.offsetParent)  

  {  

   x+=e.offsetTop;  

y+=e.offsetLeft;  

  }  

}//用户输入后,延迟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;  

}

//服务器端代码不再赘述.基本原理就是这样实现.