仿Google智能提示

       前段时间公司首页要实现一个类似Google智能提示的功能，在网上看了很多程序，多数都是基于jQuery框架的。因为公司的项目还没有打算引入jQuery，所以只好硬着头皮用纯JavaScript的方法来弄。好了废话不多说直接上代码

  1 /**//*生成下拉提示框
  2   参数 test：xmlhttp.responseText返回值，将多条记录用“|”分开
  3    "showmenu"是页面中的一个<ul>标签的ID
  4 */
  5 function List(test)
  6 {
  7     
  8     var div=document.getElementById("showmenu");
  9     var txt=test.split("|");
 10     var innerHtml="";
 11     for(var i=0;i<txt.length-1;i++)
 12     {
 13     innerHtml+="<li id=\"li"+i+"\" class=\"lli\" onclick=\"ChooseLi(this)\" onmouseover=\"MouseOver(this)\" onmouseout=\"this.style.backgroundColor=''\">"+txt[i]+"</li>";
 14     }
 15     div.innerHTML="<ul id=\"list\" >"+innerHtml+"</ul>";
 16 
 17     document.getElementById("list").style.cssText="list-style:none;position: absolute; width: 355px;  left: "+left+"px;"+" top: "+top+"px;"+" margin-bottom:0px; margin-left:0px;";
 18 document.getElementById("showmenu").style.display="block";
 19 }
 20 //鼠标经过时背景变色
 21 function MouseOver(selectedLi)
 22 {
 23     var li="li"+index;
 24     for(var i=0;i<10;i++)
 25     {
 26        document.getElementById("li"+i).style.backgroundColor='#ffffff';
 27     }
 28     selectedLi.style.backgroundColor='#00ee77';
 29 }
 30 
 31 /**//*选中某条记录后在文本框中显示并隐藏下拉框，Search是查询数据库的方法，这里不列出
 32 "txtSearch"是页面文本框的ID
 33 "showmenu"是页面中的一个<ul>标签的ID
 34 */
 35 function ChooseLi(li)
 36 {
 37 document.getElementById('txtSearch').value=li.innerHTML;
 38 document.getElementById('showmenu').style.display='none';
 39 Search();
 40 }
 41 /**//**
 42 
 43 
 44 /
 45 function GetResult(str,event)
 46 {
 47      //兼容IE和火狐
 48      e = event ? event :(window.event ? window.event : null);
 49         //如果按下回车键
 50         if(event.keyCode==13)
 51         {
 52          var btn=document.getElementById("txtSearch")
 53          if(btn.value=="")
 54          {
 55             window.alert('请输入产品名称');
 56          }
 57               //index是全局变量默认值为-1，用来标记记录顺序
 58             var li="li"+index;
 59             document.getElementById('txtSearch').value= document.getElementById(li).innerHTML;
 60             document.getElementById('showmenu').style.display='none'; 
 61             Search();
 62         }
 63         //如果按下向上按钮        
 64         else if (event.keyCode==38) 
 65         {
 66               
 67              if (index==0||index==-1)
 68              {
 69                 index=9;
 70              }
 71              else 
 72              {
 73                 index=index-1;
 74              }
 75              var li="li"+index;
 76                 for(var i=0;i<10;i++)
 77                 {
 78                document.getElementById("li"+i).style.backgroundColor='#ffffff';
 79                 }
 80                 document.getElementById(li).style.backgroundColor='#00ee77';
 81                 document.getElementById('txtSearch').value= document.getElementById(li).innerHTML;
 82         }
 83        //如果按下向下按钮    
 84         else if (event.keyCode==40) 
 85         {
 86             if (index==-1||index==9)
 87             {
 88                 index=0;
 89             }
 90             else 
 91             {
 92                 index=index+1;
 93             }
 94              var li="li"+index;
 95                 for(var i=0;i<10;i++)
 96                 {
 97                  document.getElementById("li"+i).style.backgroundColor='#ffffff';
 98                 }
 99                 document.getElementById(li).style.backgroundColor='#00ee77';
100                 document.getElementById('txtSearch').value= document.getElementById(li).innerHTML;  
101         }
102         else 
103         {
104              //清除前后空格
105             var strNoSpace=str.replace(/(^\s*)|(\s*$)/g, "");
106             
107             var url="check.aspx?userid="+escape(strNoSpace);
108             xmlhttp.open("get",url,true);
109             xmlhttp.onreadystatechange = Callback;
110             xmlhttp.send(null); 
111         }  
112 }
113 

 1 function CPos(x, y)
 2 {
 3     this.x = x;
 4     this.y = y;
 5 }
 6 
 7 function GetObjPos(ATarget)
 8 {
 9     var target = ATarget;
     var pos = new CPos(target.offsetLeft, target.offsetTop);
     
     var target = target.offsetParent;
     while (target)
     {
         pos.x += target.offsetLeft;
         pos.y += target.offsetTop;
         
         target = target.offsetParent
     }
     
     return pos;
 }
 /*"txtSearch"是文本框ID
    pos.x代表横坐标，pos.y代表纵坐标
    left是文本框距离屏幕左边的距离，top是文本框距离屏幕上方的距离加上文本框的高度（也就是智能提示下拉列表的位置）
 */
 var txt=document.getElementById("txtSearch");
 var pos = GetObjPos(txt)
 var left=pos.x;
 var top=pos.y+txt.offsetHeight;
 

      授人以鱼不如授人以渔，本文仅供志同道合的朋友一起研究JavaScript，源码暂不提供下载。查询数据方面只是调用了另一个页面来返回数据，以后有时间改成调用webservice的。希望园子里的各位大牛踊跃拍砖