您當(dāng)前位置：首頁 > web前端 > jscript > ajax實(shí)例教程：模擬google動態(tài)提示效果

ajax實(shí)例教程：模擬google動態(tài)提示效果

來源：程序員人生發(fā)布時間：2014-01-28 01:47:47 閱讀次數(shù)：3120次

　　建站學(xué)院（LieHuo.Net）Ajax教程 實(shí)現(xiàn)方式很簡單,步驟如下:點(diǎn)擊文本框內(nèi)后,獲得文本框的x,y；輸入內(nèi)容后,延遲1-2秒將請求發(fā)送至服務(wù)器端；.服務(wù)器端查詢后,返回給客戶端；客戶端顯示DIV,并根據(jù)1獲得的xy定位DIV的位置,將返回的內(nèi)容填充至DIV內(nèi)。
　　代碼步驟如下:

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

以下為引用的內(nèi)容：
//getxy()代碼,為將要顯示的div確定位置
Function getxy()//getxy()代碼,為將要顯示的div確定位置
{
    x=e.offsetTop;
   y=e.offsetLeft;
while(ee=e.offsetParent)
{
   x+=e.offsetTop;
y+=e.offsetLeft;
}
}//用戶輸入后,延遲1-2秒提交即可,以免造成服務(wù)器端負(fù)載.
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);
}
}
//處理函數(shù),創(chuàng)建表格,填充到div中,代碼中的changeColor()是用于鼠標(biāo)移動后改變顏色的.
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">";
                  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>";
               }
              else
                {
                    //innerHTML += "暫時沒有數(shù)據(jù)";
                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;
}
//服務(wù)器端代碼不再贅述.基本原理就是這樣實(shí)現(xiàn).

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
程序員人生

------分隔線----------------------------

上一篇 電影新站短期內(nèi)如何快速讓百度收錄過千

下一篇 去掉CSS贅余代碼，CSS可以更簡潔

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

ajax實(shí)例教程：模擬google動態(tài)提示效果