Google Suggest ;-) 基于js的动态下拉菜单


Posted in Javascript onOctober 11, 2006

基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中。
能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录。试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤。
另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图:Google Suggest ;-) 基于js的动态下拉菜单

Google自动完成的源代码如下:
// Copyright 2004 and onwards Google Inc.

var w="";
var pa=false;
var ta="";
var da=false;
var g="";
var G="";
var m="";
var j=-1;
var h=null;
var Z=-1;
var za=null;
var Ca=5;
var q="";
var Lb="div";
var Bb="span";
var la=null;
var a=null;
var b=null;
var Xa=null;
var mb=null;
var X=null;
var ha=null;
var ra=false;
var kc=null;
var hc=null;
var Ua=new Object();
var ca=1;
var Aa=1;
var Y=false;
var na=-1;
var Va=(new Date()).getTime();
var Q=false;
var k=null;
var sa=null;
var E=null;
var B=null;
var aa=null;
var Ba=false;
var Ka=false;
var p=60;
var ia=null;
var ya=null;
var W=0;
InstallAC=function(frm,fld,sb,pn,rl,hd,sm,ufn){
la=frm;
a=fld;
Xa=sb;
if(!pn)pn="search";
ia=pn;
var Kb="en|";
var Jb="zh-CN|zh-TW|ja|ko|vi|";
if(!rl||Kb.indexOf(rl+"|")==-1)rl="en";
ha=nb(rl);
if(Jb.indexOf(ha+"|")==-1){
X=true;
Y=false;
Ba=false}
else{
X=false;
if(ha.indexOf("zh")==0)Y=false;
else Y=true;
Ba=true}
if(!hd)hd=false;
ya=hd;
if(!sm)sm="query";
w=sm;
mb=ufn;
ac()}

;
function Yb(){
ra=true;
a.blur();
setTimeout("sfi();
",10);
return}

function Fb(){
if(document.createEventObject){
var y=document.createEventObject();
y.ctrlKey=true;
y.keyCode=70;
document.fireEvent("onkeydown",y)}
}

function nc(vb){
var y=document.createEventObject();
y.ctrlKey=true;
y.keyCode=vb;
document.fireEvent("onkeydown",y)}

function gc(event){
}

function ic(event){
}

function Pb(event){
if(!event&&window.event)event=window.event;
if(event)na=event.keyCode;
if(event&&event.keyCode==8){
if(X&&(a.createTextRange&&(event.srcElement==a&&(bb(a)==0&&lb(a)==0)))){
cc(a);
event.cancelBubble=true;
event.returnValue=false;
return false}
}
}

function mc(){
}

function Db(){
if(w=="url"){
Ha()}
ba()}

function ba(){
if(b){
b.style.left=ob(a)+"px";
b.style.top=Qb(a)+a.offsetHeight-1+"px";
b.style.width=Ja()+"px"}
}

function Ja(){
if(navigator&&navigator.userAgent.toLowerCase().indexOf("msie")==-1){
return a.offsetWidth-ca*2}
else{
return a.offsetWidth}
}

function ac(){
if(jb()){
Q=true}
else{
Q=false}
if(pa)E="complete";
else E="/complete/"+ia;
sa=E+"?hl="+ha;
if(!Q){
qa("qu","",0,E,null,null)}
la.onsubmit=Fa;
a.autocomplete="off";
a.onblur=Ob;
if(a.createTextRange)a.onkeyup=new Function("return okuh(event);
 ");
else a.onkeyup=okuh;
a.onsubmit=Fa;
g=a.value;
ta=g;
b=document.createElement("DIV");
b.id="completeDiv";
ca=1;
Aa=1;
b.style.borderRight="black "+ca+"px solid";
b.style.borderLeft="black "+ca+"px solid";
b.style.borderTop="black "+Aa+"px solid";
b.style.borderBottom="black "+Aa+"px solid";
b.style.zIndex="1";
b.style.paddingRight="0";
b.style.paddingLeft="0";
b.style.paddingTop="0";
b.style.paddingBottom="0";
ba();
b.style.visibility="hidden";
b.style.position="absolute";
b.style.backgroundColor="white";
document.body.appendChild(b);
Ma("",new Array(),new Array());
Gb(b);
var s=document.createElement("DIV");
s.style.visibility="hidden";
s.style.position="absolute";
s.style.left="-10000";
s.style.top="-10000";
s.style.width="0";
s.style.height="0";
var M=document.createElement("IFRAME");
M.completeDiv=b;
M.name="completionFrame";
M.id="completionFrame";
M.src=sa;
s.appendChild(M);
document.body.appendChild(s);
if(frames&&(frames["completionFrame"]&&frames["completionFrame"].frameElement))B=frames["completionFrame"].frameElement;
else B=document.getElementById("completionFrame");
if(w=="url"){
Ha();
ba()}
window.onresize=Db;
document.onkeydown=Pb;
Fb()}

function Ob(event){
if(!event&&window.event)event=window.event;
if(!ra){
F();
if(na==9){
Xb();
na=-1}
}
ra=false}

okuh=function(e){
m=e.keyCode;
aa=a.value;
Oa()}

;
function Xb(){
Xa.focus()}

sfi=function(){
a.focus()}

;
function Wb(va){
for(var f=0,oa="",zb="\n\r";
f
function Qa(i,dc){
var ga=i.getElementsByTagName(Bb);
if(ga){
for(var f=0;
f
function U(i){
if(!i)return null;
return Qa(i,"cAutoComplete")}

function wa(i){
if(!i)return null;
return Qa(i,"dAutoComplete")}

function F(){
document.getElementById("completeDiv").style.visibility="hidden"}

function cb(){
document.getElementById("completeDiv").style.visibility="visible";
ba()}

function Ma(is,cs,ds){
Ua[is]=new Array(cs,ds)}

sendRPCDone=function(fr,is,cs,ds,pr){
if(W>0)W--;
var lc=(new Date()).getTime();
if(!fr)fr=B;
Ma(is,cs,ds);
var b=fr.completeDiv;
b.completeStrings=cs;
b.displayStrings=ds;
b.prefixStrings=pr;
rb(b,b.completeStrings,b.displayStrings);
Pa(b,U);
if(Ca>0)b.height=16*Ca+4;
else F()}

;
function Oa(){
if(m==40||m==38)Yb();
var N=lb(a);
var v=bb(a);
var V=a.value;
if(X&&m!=0){
if(N>0&&v!=-1)V=V.substring(0,v);
if(m==13||m==3){
var d=a;
if(d.createTextRange){
var t=d.createTextRange();
t.moveStart("character",d.value.length);
t.select()}
else if(d.setSelectionRange){
d.setSelectionRange(d.value.length,d.value.length)}
}
else{
if(a.value!=V)S(V)}
}
g=V;
if(Eb(m)&&m!=0)Pa(b,U)}

function Fa(){
return xb(w)}

function xb(eb){
da=true;
if(!Q){
qa("qu","",0,E,null,null)}
F();
if(eb=="url"){
var R="";
if(j!=-1&&h)R=U(h);
if(R=="")R=a.value;
if(q=="")document.title=R;
else document.title=q;
var Tb="window.frames['"+mb+"'].location = \""+R+'";
';
setTimeout(Tb,10);
return false}
else if(eb=="query"){
la.submit();
return true}
}

newwin=function(){
window.open(a.value);
F();
return false}

;
idkc=function(e){
if(Ba){
var Ta=a.value;
if(Ta!=aa){
m=0;
Oa()}
aa=Ta;
setTimeout("idkc()",10)}
}

;
setTimeout("idkc()",10);
function nb(La){
if(encodeURIComponent)return encodeURIComponent(La);
if(escape)return escape(La)}

function yb(Mb){
var H=100;
for(var o=1;
o<=(Mb-2)/2;
o++){
H=H*2}
H=H+50;
return H}

idfn=function(){
if(ta!=g){
if(!da){
var Za=nb(g);
var ma=Ua[g];
if(ma){
Va=-1;
sendRPCDone(B,g,ma[0],ma[1],B.completeDiv.prefixStrings)}
else{
W++;
Va=(new Date()).getTime();
if(Q){
fc(Za)}
else{
qa("qu",Za,null,E,null,null);
frames["completionFrame"].document.location.reload(true)}
}
a.focus()}
da=false}
ta=g;
setTimeout("idfn()",yb(W));
return true}

;
setTimeout("idfn()",10);
var Cb=function(){
S(U(this));
q=wa(this);
da=true;
Fa()}

;
var pb=function(){
if(h)l(h,"aAutoComplete");
l(this,"bAutoComplete")}

;
var ec=function(){
l(this,"aAutoComplete")}

;
function Na(C){
g=G;
S(G);
q=G;
if(!za||Z<=0)return;
cb();
if(C>=Z){
C=Z-1}
if(j!=-1&&C!=j){
l(h,"aAutoComplete");
j=-1}
if(C<0){
j=-1;
a.focus();
return}
j=C;
h=za.item(C);
l(h,"bAutoComplete");
g=G;
q=wa(h);
S(U(h))}

function Eb(ja){
if(ja==40){
Na(j+1);
return false}
else if(ja==38){
Na(j-1);
return false}
else if(ja==13||ja==3){
return false}
return true}

function Pa(K,ib){
var d=a;
var T=false;
j=-1;
var J=K.getElementsByTagName(Lb);
var O=J.length;
Z=O;
za=J;
Ca=O;
G=g;
if(g==""||O==0){
F()}
else{
cb()}
var Ab="";
if(g.length>0){
var f;
var o;
for(var f=0;
f
function ob(r){
return Ya(r,"offsetLeft")}

function Qb(r){
return Ya(r,"offsetTop")}

function Ya(r,ia){
var kb=0;
while(r){
kb+=r[ia];
r=r.offsetParent}
return kb}

function qa(name,value,Ra,hb,fb,Sb){
var Nb=name+"="+value+(Ra?";
 expires="+Ra.toGMTString():"")+(hb?";
 path="+hb:"")+(fb?";
 domain="+fb:"")+(Sb?";
 secure":"");
document.cookie=Nb}

function Ha(){
var xa=document.body.scrollWidth-220;
xa=0.73*xa;
a.size=Math.floor(xa/6.18)}

function lb(n){
var N=-1;
if(n.createTextRange){
var fa=document.selection.createRange().duplicate();
N=fa.text.length}
else if(n.setSelectionRange){
N=n.selectionEnd-n.selectionStart}
return N}

function bb(n){
var v=0;
if(n.createTextRange){
var fa=document.selection.createRange().duplicate();
fa.moveEnd("textedit",1);
v=n.value.length-fa.text.length}
else if(n.setSelectionRange){
v=n.selectionStart}
else{
v=-1}
return v}

function cc(d){
if(d.createTextRange){
var t=d.createTextRange();
t.moveStart("character",d.value.length);
t.select()}
else if(d.setSelectionRange){
d.setSelectionRange(d.value.length,d.value.length)}
}

function jc(Zb,Ea){
if(!Ea)Ea=1;
if(pa&&pa<=Ea){
var Ia=document.createElement("DIV");
Ia.innerHTML=Zb;
document.getElementById("console").appendChild(Ia)}
}

function l(c,name){
db();
c.className=name;
if(Ka){
return}
switch(name.charAt(0)){
case "m":c.style.fontSize="13px";
c.style.fontFamily="arial,sans-serif";
c.style.wordWrap="break-word";
break;
case "l":c.style.display="block";
c.style.paddingLeft="3";
c.style.paddingRight="3";
c.style.height="16px";
c.style.overflow="hidden";
break;
case "a":c.style.backgroundColor="white";
c.style.color="black";
if(c.displaySpan){
c.displaySpan.style.color="green"}
break;
case "b":c.style.backgroundColor="#3366cc";
c.style.color="white";
if(c.displaySpan){
c.displaySpan.style.color="white"}
break;
case "c":c.style.width=p+"%";
c.style.cssFloat="left";
break;
case "d":c.style.cssFloat="right";
c.style.width=100-p+"%";
if(w=="query"){
c.style.fontSize="10px";
c.style.textAlign="right";
c.style.color="green";
c.style.paddingTop="3px"}
else{
c.style.color="#696969"}
break}
}

function db(){
p=65;
if(w=="query"){
var wb=110;
var Sa=Ja();
var tb=(Sa-wb)/Sa*100;
p=tb}
else{
p=65}
if(ya){
p=99.99}
}

function Gb(i){
db();
var Ub="font-size: 13px;
 font-family: arial,sans-serif;
 word-wrap:break-word;
";
var Vb="display: block;
 padding-left: 3;
 padding-right: 3;
 height: 16px;
 overflow: hidden;
";
var bc="background-color: white;
";
var qb="background-color: #3366cc;
 color: white ! important;
";
var ub="display: block;
 margin-left: 0%;
 width: "+p+"%;
 float: left;
";
var Ga="display: block;
 margin-left: "+p+"%;
";
if(w=="query"){
Ga+="font-size: 10px;
 text-align: right;
 color: green;
 padding-top: 3px;
"}
else{
Ga+="color: #696969;
"}
D(".mAutoComplete",Ub);
D(".lAutoComplete",Vb);
D(".aAutoComplete *",bc);
D(".bAutoComplete *",qb);
D(".cAutoComplete",ub);
D(".dAutoComplete",Ga);
l(i,"mAutoComplete")}

function rb(i,cs,Hb){
while(i.childNodes.length>0)i.removeChild(i.childNodes[0]);
for(var f=0;
f
function D(name,gb){
if(Ka){
var I=document.styleSheets[0];
if(I.addRule){
I.addRule(name,gb)}
else if(I.insertRule){
I.insertRule(name+" {
 "+gb+" }
",I.cssRules.length)}
}
}

function jb(){
var A=null;
try{
A=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{
A=new ActiveXObject("Microsoft.XMLHTTP")}
catch(oc){
A=null}
}
if(!A&&typeof XMLHttpRequest!="undefined"){
A=new XMLHttpRequest()}
return A}

function fc(Rb){
if(k&&k.readyState!=0){
k.abort()}
k=jb();
if(k){
k.open("GET",sa+"&js=true&qu="+Rb,true);
k.onreadystatechange=function(){
if(k.readyState==4&&k.responseText){
var frameElement=B;
if(k.responseText.charAt(0)=="<"){
W--}
else{
eval(k.responseText)}
}
}

;
k.send(null)}
}

function S(Wa){
a.value=Wa;
aa=Wa}



源代码写的非常“拥挤”,我不得不用以下代码做了beautifier: 
perl -pe 's/;/;\n/g' ac.js |perl -pe 's/}/}\n/g'|perl -pe 's/{/{\n/g' > ac.js.txt

附:

你尝试过把26个英文字母从A~Z输入,那么,排第一的将会是哪些单词呢:

a---amazon
b---best buy
c---cnn
d---dictionary
e---ebay
f---firefox
g---games
h---hotmail
i---ikea
j---jokes
k---kazaa
l---lyrics
m---mapquest
n---news
o---online dictionary
p---paris hilton
q---quotes
r---recipes
s---spybot
t---tara reid
u---ups
v---verizon
w---weather
x---xbox
y---yahoo
z---zip codes
车东[1]和huttmean[2]都说了google搜索建议的好处。
[1] http://www.chedong.com/blog/archives/000028.html#more
[2] http://www.hutteman.com/weblog/2004/12/10-217.html车东说得更好。还给了代码。不愧技术派。我不在乎这个功能。:)gmail中还是很好
用的,因为不用自己记忆email地址了。就
像使用本地email程序一样。google中用处
不大。我写这些是想问个问题。我不是技术派我
是较真儿派。:)google中不但有提示还有记忆搜索过的条
目(或这是浏览器在记忆?)1)出于隐私考虑我想禁用google的搜索提
示 and/or 记忆怎么办。2)我不禁用。但
现在机子要换人使用了,我如何清空的搜
索记忆。3)进一步。我想让google认为我
这是用另外一台机子上网是只要删除以前
google留下的cookie就行了吗?如果是它
的cookie怎么找到。如果不是,应该怎么
办?也许问的问题有的问的不对你大概猜猜我
问的是什么吧.:)不是每个人都能有一台就自己使用的计算
机。而且公有计算机(如在共用的办公室
和图书馆中)这个隐私的问题会更突出。gmail在出来隐私问题就被批评过(当然其
实其它email服务商有的还不如gmail。)
现在google太厉害了,说不定比你自己还
了解你自己在网上干吗了呢。你说会这样
吗,车东?回复在:
http://www.chedong.com/blog/archives/000028.html#more有可能回复抄送邮件更好。hehe
不让google泄露使用者的过多隐私是很多人关注的话题吧
Javascript 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
JS中style属性
Oct 11 #Javascript
用JavaScript脚本实现Web页面信息交互
Oct 11 #Javascript
window.open的功能全解析
Oct 10 #Javascript
Array.slice()与Array.splice()的返回值类型
Oct 09 #Javascript
实例:尽可能写友好的Javascript代码
Oct 09 #Javascript
splice slice区别
Oct 09 #Javascript
获取DOM对象的几种扩展及简写
Oct 09 #Javascript
You might like
PHP中函数内引用全局变量的方法
2008/10/20 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php格式化电话号码的方法
2015/04/24 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
JavaScript中的数组操作介绍
2014/12/30 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
js获取Get值的方法
2016/09/29 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python实现图片拼接的代码
2018/07/02 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
行政副总岗位职责
2014/02/23 职场文书
排查整治工作方案
2014/06/09 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
出纳岗位职责范本
2015/03/31 职场文书
财务部岗位职责范本
2015/04/14 职场文书
机器人总动员观后感
2015/06/09 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python