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

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

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

相关推荐