使用AJAX技术实现google suggest学习笔记

利用最近刚学习的AJAX技术,实现google suggest功能

 

 

 

对键盘事件进行判断,判断按下键的键值,若按下的键为上下键,则转到执行上下键处理函数 catchKeyBoard();否则转到创建层和层的主体。

 

1.获取创建的层的绝对位置。

       要获取创建的层的位置,必须先获取txt1的位置。在这里,我们定义一个函数来获取txt1的位置:

 function getPosition( obj )

     { 
     var top = 0,left = 0;

      do

{

    top += obj.offsetTop;

        left += obj.offsetLeft;

     }

while ( obj = obj.offsetParent );     

      var arr = new Array();     

      arr[0] = top;

      arr[1] = left;      

      return arr;   

   }

 

2.创建层

function createMenu( textBox, menuid )

    {

       if( document.getElementById( menuid ) == null )

       {

         var left_new=getPosition( textBox )[1]

         var top_new=getPosition( textBox )[0];         

         var newControl = document.createElement("div"); //创建层     

         newControl.id = menuid;       

         document.body.appendChild( newControl );      

         newControl.style.position = "absolute";   //确定为绝对路径

         newControl.style.border = "solid 1px #000000";  //边框式样

         newControl.style.backgroundColor = "#FFFFFF";   //颜色

         newControl.style.width = textBox.clientWidth + "px"; //绝对宽度

         newControl.style.left = left_new + "px";           //定位

         newControl.style.top = (top_new + textBox.clientHeight + 2) + "px";           return newControl;

       }

       else

         return document.getElementById( menuid );

    }

 

 

3.创建层主体

          首先定义数组:

  var arr1=new Array("alizee","westlife","john","blue","colinton","angle");

   var arr2=new Array("乔丹","科比","姚明","麦蒂","詹姆斯","雷科巴","R9","Chan","angle","orange","green","white","red","blue");

   定义一个函数来取值:

  function getSearchResult( key )

    {

      switch ( key )

      {

        case "a":    //当输入a的时候显示arr1里面的数据

          return arr1;

        case "s":    //输入s的时候显示arr2里面的数据

          return arr2;  

        default:

          return new Array();

      } 

}

 

正式创建层主体:

function createMenuBody( key )

    {

      var result = "";

      var j = 0;

      arr = getSearchResult( key ); //获取相应的数组

       //最多显示十行数据

      if(arr.length > 10)

      {

        j = 10;

      }

      else

      {

        j = arr.length;

      }

      for ( var i = 0; i < j; i++ ) //循环创建层的主体

        result += "<table border=/"0/" cellpadding=/"2/" cellspacing=/"0/" id=/"menuItem"+(i+1)+"/" οnmοuseοver=/"forceMenuItem( "+(i+1)+");/" width=/"100%/" οnclick=/"givNumber("+i+")/"><tr><td align=/"left/">" + arr[i] + "</td><td align=/"right/">" + (i+1) + " </td></tr></table>";

       return result;

    }

 

 

4.获取鼠标事件:

lastMenuItem = document.getElementById( "menuItem" + menuFocusIndex )

       if ( lastMenuItem != null )

       {

 

         lastMenuItem.style.backgroundColor="white";      

         lastMenuItem.style.color="#000000";

       }

       var menuItem = document.getElementById( "menuItem" + index );

       if ( menuItem == null )

        {

          document.getElementById("txt1").focus();

        }

        else

        {

         menuItem.style.backgroundColor = "#5555CC";

         menuItem.style.color = "#FFFFFF";

         menuFocusIndex = index;

      }

 

5.获取键被按下或放开事件:

 

Var keyNumber = event.keyCode;

if(keyNumber =='40') 

      {

        if(menuFocusIndex == 10)

         return true;

       else if (menuFocusIndex == null) //当焦点在文本框中间时,按向下跳到第一个主体。

       {

           forceMenuItem( 1 );

           givNumber( 0 );

       }

       else

       {

          forceMenuItem( menuFocusIndex+1 ); //焦点增加1

          givNumber(menuFocusIndex-1);

       }

 

      }

      else if(keyNumber == '38')

      {

        if(menuFocusIndex == 1)

         {

           forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时,按向上让它回到文本框。

         }

    

        else

        {

          forceMenuItem(menuFocusIndex-1); //焦点减少1

          givNumber(menuFocusIndex-1);

        }

      }

 

 

6.通过键值来给文本框赋值:

 

function givNumber( index )

     {

       document.getElementById("txt1").value = arr[index];

       document.getElementById("txt1").focus();             

     }

 

 

只是演示一个小例子,也没有实现数据库连接的功能, 直接用数组代替了,实现的效果和google suggest实现的效果是一样的,如果是连接数据库,就必须利用AJAX技术来实现异步回调,篇幅有限,不做过多介绍了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值