关闭

类似google提示窗口

683人阅读 评论(0) 收藏 举报
<!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>
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:202881次
    • 积分:2629
    • 等级:
    • 排名:第14500名
    • 原创:38篇
    • 转载:75篇
    • 译文:0篇
    • 评论:62条
    最新评论