类似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>
 

类似Google Calendar效果的简单实现

2007/11/02目前只是简单的实现了行选择的效果。后面的功能也是利用DIV来实现的并结合Ajax方法将登陆的数据保存到数据库中。DOCTYPE HTML PUBLIC "-//W3C//DTD H...
  • wanyongping
  • wanyongping
  • 2007年11月02日 11:22
  • 2371

类似MSN、QQ消息提示窗口

var oPopup = window.createPopup();var popTop=100;function popmsg(msgstr){var winstr="";winstr+=" ";w...
  • hzxwww
  • hzxwww
  • 2006年07月15日 15:56
  • 629

highcharts学习历程,包括对同类型的echarts,google charts对比比较记录

11个很棒的 jQuery 图表库  http://www.cnblogs.com/ranran/p/4642064.html     一个很恰当的比喻:Highcharts和 Echart...
  • u013675317
  • u013675317
  • 2017年08月29日 20:47
  • 561

提示窗口

摘自:http://www.codeproject.com/Articles/187753/Extended-CComboBox ////////// ComboBoxExt.h   #if !d...
  • ben_lbj
  • ben_lbj
  • 2014年02月25日 16:24
  • 817

右下角弹出提示窗口(类似MSN功能)

页面右下角弹出类似QQ或MSN的消息提示    /**//*  **    ==============================================================...
  • jxyangzi
  • jxyangzi
  • 2006年10月21日 21:22
  • 770

云端办公?除了访问不了的谷歌和付费的微软,您其实还有其他选择

LibreOffice的商业合作伙伴Collabora和ownCloud共同发布了一个在线LibreOffice版本,其中ownCloud是一个类似Dropbox的开源文件存储和共享系统(其实就是一私...
  • zhubaitian
  • zhubaitian
  • 2015年12月17日 10:14
  • 1453

类似qq新闻提示窗口样码(cpy)

源自:http://www.codeproject.com/dialog/taskbarnotifier.asp 据说是类似qq新闻提示窗口样码。现在没有看。现记录一下,改天研究完再补充。...
  • jerry_of
  • jerry_of
  • 2007年10月11日 12:51
  • 544

气泡提示窗口

//******************************************************************//作 者:js0001//描 述:气泡信息提示 V...
  • js0001
  • js0001
  • 2009年03月19日 16:43
  • 1805

类似 google 提示功能

前台页面:    form id="form1" runat="server">        asp:ScriptManager ID="ScriptManager1" runat="server"...
  • lxl_sports
  • lxl_sports
  • 2008年12月16日 14:24
  • 338

保留申请的 Google Voice 号码

Google Voice 是由 Google 推出的 VOIP 服务,其初衷是将个人所用的众多电话号码集中成为一个号码,并且提供更多增值服务。通过申请 Google Voice 可以得到一个美国电话号...
  • xhhjin
  • xhhjin
  • 2017年03月10日 20:30
  • 6314
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:类似google提示窗口
举报原因:
原因补充:

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