您当前位置：首页 > web前端 > jscript > ajax实例教程：模拟google动态提示效果

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

来源：程序员人生发布时间：2014-01-28 01:47:47 阅读次数：2920次

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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 电影新站短期内如何快速让百度收录过千

下一篇 去掉CSS赘余代码，CSS可以更简洁

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点