实现google suggest技术过程总结

 在 ivony 的指导下，我对 google 的 google suggest 技术进行了相关的研究。并且取得了一定的成果，基本成功实现了它的功能。下面对其中用 js 创建其显示效果的控件过程来个总结。
      在这里我先介绍一下实现该控件的过程。我将这个过程为为几个步骤来实现。

      首先触发txt1后，首先对键盘事件进行判断，判断按下键的键值，若按下的键为上下键，则转到执行上下键处理函数 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;   

   }

     通过该函数获取txt1的位置为（top，left），则依附txt1创建的层的位置为(top+textbox.clientheight，left),，宽度和txt1相同。

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";  //注意，将此高度加2是为了解决JS出现的非自然因素…        

         return newControl;

       }

       else

         return document.getElementById( menuid );

    }

3. 创建层的主体

     接下来当然是创建层的主体。在这里为了显示它的效果，我们先定义一些数组，从数组中取数据。

     定义数组：

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

   var arr2=new Array("信乐团","F4","TWINS","SHE","胡彦彬","周杰伦","刘若英","刘德华","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. 捕获鼠标事件。

    客观的讲应该是获取层主体的焦点，当主体获取了这个焦点，那么它的颜色变为高亮色。当鼠标移到该主体的时候，它就获取了这个焦点，使该主体变为高亮。换一个角度来思考，变为高亮色这个事件也可以看做是由鼠标触发的。

   因此用onmouseover事件来触发，触发函数forceMenuItem(index).

   先定义一个变量 var menuFocusIndex;它保存的是上一个高亮色的主体的值。触发鼠标事件时，我们将上一个高亮色的主体变为白色，将现在触发的主体变为兰色，就解决了这个问题。代码如下：

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.捕获上下键事件

   接下来我们解决捕获上下键的问题。这里面一个容易混淆的地方就是，该事件的触发是由txt1来触发的，而不是由层的主体来触发的。事实上围绕这个问题我在实现过程中也走了不少弯路。

   前面我有提到，在触发txt1时即进行判断，如果是上下键即转到上下键处理函数catchKeyBoard()。而不是到创建层。在该函数中，我们也可以调用鼠标事件函数（确切的讲是调用获取焦点函数）。

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();             

     }

   到这里，该控件的主体就基本上完成了，运行，在文本框分别输入a和s，可以发现它和google suggest的效果是一样的。当然，接下来还要利用AJAX技术进行异步回调，输入查询值的时候由后台从数据库返回查询的数值，做成数组的形式。当然这些简单的步骤我在这里就不多说了。至此，google suggest技术完全得到实现。

 

转自：http://www.cnblogs.com/ustbwuyi/archive/2006/07/17/452700.html