google suggest的实现

自己想实现一个google suggest，以下是参考以为牛人的文章，加了一些自己的东西终于调通啦，以为是源码，希望对大家有所帮助，后台传回的为json的字符串，大体思路为：文本框监听键盘事件、触发事件、提取参数、根据文本框的位置创建div，向后退发起请求，后台发挥数据，前台解析，生成列表，这里面是table，再把table写到创建的div中，接着是监听用户键盘或鼠标事件，给文本框赋值，这里有个问题就是浏览器的兼容性问题，这里从网上搜的，浏览器都能兼容。

// JavaScript Document


//取得控件位置
var list;
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;   
   }


//创建层
function createMenu( textBox)
    {
       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 + 8) + "px";  //注意，将此高度加2是为了解决JS出现的非自然因素…
         return newControl;
       }
       else
         return document.getElementById("menuid");
    }




 //创建层主体
   function createMenuBody( arr )
    {
      var result = "";
      var j = 0;
      list = arr;
       //最多显示十行数据
    
      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=\"givNumberRemove("+i+")\"><tr><td align=\"left\">" + arr[i].name + "</td><td align=\"right\">"+ arr[i].address+"</td></tr></table>";
       
       return result;
    }


       
  
    //捕获键盘事件
   function keyDown(e)
   {
      var keyNumber = 0,e=e||event;
          keyNumber = e.keyCode||e.which||e.charCode;
          if(keyNumber =='40') //向下
 { $("#mapKey").unbind("keyup");
if(menuFocusIndex == 10)
return true;
  else if (menuFocusIndex == 0) //当焦点在文本框中间时，按向下跳到第一个主体。
  {
  forceMenuItem( 1 );
  givNumber( 0 );
  }
  else
  {
 forceMenuItem( menuFocusIndex+1 ); //焦点增加1
 givNumber(menuFocusIndex-1);
  }


      }
      else if(keyNumber == '38')//向上
      { $("#mapKey").unbind("keyup");
        if(menuFocusIndex == 1)
         {
           forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时，按向上让它回到文本框。
         }else if (menuFocusIndex == 0)
         {
              forceMenuItem(list.length);
                 givNumber(list.length);
         }


        else
        {
          forceMenuItem(menuFocusIndex-1); //焦点减少1
         
        }
      }
      else if(keyNumber == '13')
       {
           var menuid = document.getElementById("menuid");
            document.body.removeChild(menuid);
            menuFocusIndex = 0;
       }else{
           $("#mapKey").bind("keyup",function(){suggest();});
       }


       
          
   }


       document.onkeydown = keyDown;
       function givNumberRemove(index)
         {
              givNumber(index);
              removeSuggest();
         }


       function givNumber(index)
         {
           document.getElementById("mapKey").value = list[index].name;
           document.getElementById("mapKey").focus();
         }


     function removeSuggest()
         {
             var menuid = document.getElementById("menuid");
             document.body.removeChild(menuid);
              $("#mapKey").bind("keyup",function(){suggest();});
              menuFocusIndex = 0;


         }




      var menuFocusIndex = 0;
      function forceMenuItem(index){


           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("mapKey").focus();
          menuFocusIndex = 0;
        }
        else
        {
         menuItem.style.backgroundColor = "#5555CC";
         menuItem.style.color = "#FFFFFF";
         menuFocusIndex = index;
        }




          
      }




      //suggest


      function suggest()
      {
           var name = $("#mapKey").val();
              if(name == "")
               {
                  var menuid = document.getElementById("menuid");
                  if(menuid)
                    document.body.removeChild(menuid);
                  menuFocusIndex = 0;
                  return;
               }
               $.ajax({
                          type: "post",
                          url: "suggest.php",
                          data: {name: name},
                          stamp : Math.random(),
                          success: function(data)
                                  {
                                    
                                       var restaurant = document.getElementById("mapKey");
                                       var myobj=JSON.parse(data);
                                       if(myobj.length > 0)
                                       {
                                        var menuid = createMenu(restaurant);
                                        var result = createMenuBody(myobj);
                                        menuid.innerHTML = result;
                                       }


                                  }
                      });


      }