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"  οnkeyup="getA();" οnclick="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 οnmοuseοver=/"changecolor1(this);/" οnmοuseοut=/"changecolor2(this);/">";

                    innerHTML += "<td  height='25'  style=/"cursor:hand/" οnclick=/"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;

}

//服務器端代碼不再贅述.基本原理就是這樣實現,如果大家有更好的方式,麻煩留個言.謝謝.