国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jscript > ajax实例教程:模拟google动态提示效果

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

来源:程序员人生   发布时间:2014-01-28 01:47:47 阅读次数:2670次
  建站学院(LieHuo.Net)Ajax教程 实现方式很简单,步骤如下:点击文本框内后,获得文本框的x,y;输入内容后,延迟1-2秒将请求发送至服务器端;.服务器端查询后,返回给客户端;客户端显示DIV,并根据1获得的xy定位DIV的位置,将返回的内容填充至DIV内。
  代码步骤如下:

以下为引用的内容:
<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);"/>

以下为引用的内容:
//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">";  
                  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 += "暂时没有数据";  
                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;  
}
//服务器端代码不再赘述.基本原理就是这样实现.
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生