最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > Ajax/JavaScript> ajax实例教程:模拟google动态提示效果

ajax实例教程:模拟google动态提示效果

文章作者:网友投稿 发布时间:2009-02-04 14:48:44 来源:网络

实现方式很简单,步骤如下:点击文本框内后,获得文本框的x,y;输入内容后,延迟1-2秒将请求发送至服务器端;.服务器端查询后,返回给客户端;客户端显示DIV,并根据1获得的xy定位DIV的位置,将返回的内容填充至DIV内。

  烈火建站学院(LieHuo.Net)Ajax教程 实现方式很简单,步骤如下:点击文本框内后,获得文本框的x,y;输入内容后,延迟1-2秒将请求发送至服务器端;.服务器端查询后,返回给客户端;客户端显示DIV,并根据1获得的xy定位DIV的位置,将返回的内容填充至DIV内。
  代码步骤如下:

以下为引用的内容:
 
       

以下为引用的内容:
//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 = "\r\n";  
                  for(var i=0;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 += "
";  
                   innerHTML += ""+caption+"";  
                  innerHTML += "
";  
                }  
               innerHTML += "
\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;  
}
//服务器端代码不再赘述.基本原理就是这样实现.

上一篇: 有效提升 Javascript 的 DOM 操作效能

下一篇: JavaScript框架工具JavaScriptMVC 1.5

共有0条评论网友评论
游戏排行榜