类似google提示窗口

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 无标题文档 </ title >
< script  language ="JavaScript" >
var  autolist  =  [ " asdasdf " , " aasd " , " aidanofiuads " , " asdfasdf " , " argsgsr " , " taeta " ];


function  JSearcher(elementId,count){    
     var  g;
     var  rect;
     var  currentRow =- 1 ;
     var  Num  =  count;
    
    
    
    g  =  document.getElementById(elementId);
    rect  =  g.getBoundingClientRect();

/* 初始化工作 */     
     /* 创建容器 */
     var  oo  =  document.createElement( " div " );
    oo.style.left  =  rect.left;
    oo.style.top  =  rect.top + 20 ;
     // oo.style.backgroundColor = "#FF0000";
    oo.style.position  =   " absolute " ;
    oo.style.border  =   " 1px solid black " ;
    oo.style.width = rect.right - rect.left;
    oo.style.display = " none " ;
    
     /* 创建结果表格 */
    rtTable  =  document.createElement( " table " );
    rtTable.cellpadding  =   0 ;
    rtTable.cellspacing  =   0 ;
    rtTable.border  =   0 ;
    rtTable.style.width  =  rect.right - rect.left;
    
     for ( var  i = 0 ;i < count;i ++ ){    
        rtTR  =  rtTable.insertRow(rtTable.rows.length);
        rtTR.style.width  =  rect.right - rect.left;
        rtTD  =  rtTR.insertCell( 0 );
        rtTD.innerText = "" ;
        rtTR.style.width  =  rect.right - rect.left;
        rtTD.onmouseover  =   function (){
             var  row  =  window.event.srcElement.parentElement.rowIndex;
            selRow(row);
            currentRow  =  row;            
        }
        
        rtTD.onmouseout  =   function (){
             this .bgColor  = "" ;
        }
        
        rtTD.onclick  =   function (){
            oo.style.display   =   " none " ;
        }
    }
    
    
    
    
    g.onkeyup  =   function (){
         switch (event.keyCode){
            case   38 : // up
                currentRow  =  currentRow --   >   0   ?  currentRow :  0 ;
                selRow(currentRow);
                 break ;
            case   40 : // down                             
                currentRow  =  currentRow ++   <  (Num - 1 )  ?  currentRow:(Num - 1 );
                selRow(currentRow);
                 break ;
            case   13 :
                show( false );
                 break ;
            default :
                 update();
                 show( true );
                 
      }
      
    }
    oo.appendChild(rtTable);
    document.body.appendChild(oo);    
    
    

/* 设定选中的项目高亮显示 */     
     this .selRow  =   function (index){
         for (i = 0 ;i < Num;i ++ ){
            tdt  =  rtTable.rows(i).cells( 0 );
             if (i == index){                
                tdt.bgColor  = " #00FF00 " ;
                 g.value  =  tdt.innerText;
            } else {
                tdt.bgColor = "" ;            
            }
        }
    }

/* 更新搜索结果 */     
     this .update  =   function (){
    
         for (i = 0 ;i < count;i ++ ){
            rtTable.rows(i).style.display = " none " ;
        }        
        
        Num  =  autolist.length  <  count  ?  autolist.length : count;
         for (i = 0 ;i < Num;i ++ ){
            tdt  =  rtTable.rows(i).style.display = "" ;
            tdt  =  rtTable.rows(i).cells( 0 );
            tdt.innerText  =  autolist[i];    
        
        }

        
        
        
     }

/*  显示层 */
     this .show  =   function (flag){
         if (flag){
            oo.style.display   =   "" ;
        } else {
            oo.style.display   =   " none " ;
        }
     }

    document.body.onclick  =   function (){
        show( false );
    }
    
}
</ script >

</ head >

< body   onLoad ="JSearcher('gg',10);" >

关键字: < input  type ="text"  name ="gg"    id ="gg"   >



</ body >
</ html >