类似google提示窗口

原创 2007年09月26日 15:26:00
<!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>
 

delphi类似msn信息提示窗口

  • 2010年05月05日 15:32
  • 182KB
  • 下载

利用SuggestFrameWork开发类似Google搜索提示效果

利用SuggestFrameWork开发类似Google搜索提示效果google以及迅雷的搜索提示效果让人用着很舒服,网络上面也有很多类似的效果,但是都是复杂的ajax,让js不熟练的朋友看着头大,那...

类似百度、google的输入提示框

  • 2011年07月22日 11:17
  • 51KB
  • 下载

ASP.NET类似MSN弹出提示窗口

  • 2012年07月18日 12:17
  • 13KB
  • 下载

实现类似google搜索效果,文本框输入智能提示,没有用ajax控件和第三方控件,完全手写代码

前台页面代码:
  • wdywqc
  • wdywqc
  • 2011年04月12日 10:18
  • 1980

类似google搜索提示源码(ajax)

  • 2008年09月19日 15:58
  • 10KB
  • 下载

类似google动态搜索提示

关于实现类似google动态搜索提示的问题,然后突然就自己想为什么不写成一个通用的组件呢?说到做到,呵,然后就马上开始写这个动态搜索提示的类了,当然是基于JS的AJAX应用咯。搜索的结果来源于服务器返...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:类似google提示窗口
举报原因:
原因补充:

(最多只允许输入30个字)