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;  
}
//服务器端代码不再赘述.基本原理就是这样实现.