Google Suggest 基于JS的动态下拉菜单


FromGoogleBloG

fc7j_google-suggestion.png


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

41r8_mail_dropdown.png


Google自动完成的源代码如下:

代 码 :
//Copyright2004andonwardsGoogleInc.
varw="";
varpa=false;
varta="";
varda=false;
varg="";
varG="";
varm="";
varj=-1;
varh=null;
varZ=-1;
varza=null;
varCa=5;
varq="";
varLb="div";
varBb="span";
varla=null;
vara=null;
varb=null;
varXa=null;
varmb=null;
varX=null;
varha=null;
varra=false;
varkc=null;
varhc=null;
varUa=newObject();
varca=1;
varAa=1;
varY=false;
varna=-1;
varVa=(newDate()).getTime();
varQ=false;
vark=null;
varsa=null;
varE=null;
varB=null;
varaa=null;
varBa=false;
varKa=false;
varp=60;
varia=null;
varya=null;
varW=0;
InstallAC=function(frm,fld,sb,pn,rl,hd,sm,ufn){
la=frm;
a=fld;
Xa=sb;
if(!pn)pn="search";
ia=pn;
varKb="en|";
varJb="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;
elseY=true;
Ba=true}
if(!hd)hd=false;
ya=hd;
if(!sm)sm="query";
w=sm;
mb=ufn;
ac()}

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

functionFb(){
if(document.createEventObject){
vary=document.createEventObject();
y.ctrlKey=true;
y.keyCode=70;
document.fireEvent("onkeydown",y)}
}

functionnc(vb){
vary=document.createEventObject();
y.ctrlKey=true;
y.keyCode=vb;
document.fireEvent("onkeydown",y)}

functiongc(event){
}

functionic(event){
}

functionPb(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;
returnfalse}
}
}

functionmc(){
}

functionDb(){
if(w=="url"){
Ha()}
ba()}

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

functionJa(){
if(navigator&&navigator.userAgent.toLowerCase().indexOf("msie")==-1){
returna.offsetWidth-ca*2}
else{
returna.offsetWidth}
}

functionac(){
if(jb()){
Q=true}
else{
Q=false}
if(pa)E="complete";
elseE="/complete/"+ia;
sa=E+"?hl="+ha;
if(!Q){
qa("qu","",0,E,null,null)}
la.οnsubmit=Fa;
a.autocomplete="off";
a.οnblur=Ob;
if(a.createTextRange)a.οnkeyup=newFunction("returnokuh(event);
");
elsea.οnkeyup=okuh;
a.οnsubmit=Fa;
g=a.value;
ta=g;
b=document.createElement("DIV");
b.id="completeDiv";
ca=1;
Aa=1;
b.style.borderRight="black"+ca+"pxsolid";
b.style.borderLeft="black"+ca+"pxsolid";
b.style.borderTop="black"+Aa+"pxsolid";
b.style.borderBottom="black"+Aa+"pxsolid";
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("",newArray(),newArray());
Gb(b);
vars=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";
varM=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;
elseB=document.getElementById("completionFrame");
if(w=="url"){
Ha();
ba()}
window.οnresize=Db;
document.οnkeydοwn=Pb;
Fb()}

functionOb(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()}

;
functionXb(){
Xa.focus()}

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

;
functionWb(va){
for(varf=0,oa="",zb="\n\r";
f
functionQa(i,dc){
varga=i.getElementsByTagName(Bb);
if(ga){
for(varf=0;
f
functionU(i){
if(!i)returnnull;
returnQa(i,"cAutoComplete")}

functionwa(i){
if(!i)returnnull;
returnQa(i,"dAutoComplete")}

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

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

functionMa(is,cs,ds){
Ua[is]=newArray(cs,ds)}

sendRPCDone=function(fr,is,cs,ds,pr){
if(W>0)W--;
varlc=(newDate()).getTime();
if(!fr)fr=B;
Ma(is,cs,ds);
varb=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;
elseF()}

;
functionOa(){
if(m==40||m==38)Yb();
varN=lb(a);
varv=bb(a);
varV=a.value;
if(X&&m!=0){
if(N>0&&v!=-1)V=V.substring(0,v);
if(m==13||m==3){
vard=a;
if(d.createTextRange){
vart=d.createTextRange();
t.moveStart("character",d.value.length);
t.select()}
elseif(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)}

functionFa(){
returnxb(w)}

functionxb(eb){
da=true;
if(!Q){
qa("qu","",0,E,null,null)}
F();
if(eb=="url"){
varR="";
if(j!=-1&&h)R=U(h);
if(R=="")R=a.value;
if(q=="")document.title=R;
elsedocument.title=q;
varTb="window.frames['"+mb+"'].location=\""+R+'";
';
setTimeout(Tb,10);
returnfalse}
elseif(eb=="query"){
la.submit();
returntrue}
}

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

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

;
setTimeout("idkc()",10);
functionnb(La){
if(encodeURIComponent)returnencodeURIComponent(La);
if(escape)returnescape(La)}

functionyb(Mb){
varH=100;
for(varo=1;
o<=(Mb-2)/2;
o++){
H=H*2}
H=H+50;
returnH}

idfn=function(){
if(ta!=g){
if(!da){
varZa=nb(g);
varma=Ua[g];
if(ma){
Va=-1;
sendRPCDone(B,g,ma[0],ma[1],B.completeDiv.prefixStrings)}
else{
W++;
Va=(newDate()).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));
returntrue}

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

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

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

;
functionNa(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))}

functionEb(ja){
if(ja==40){
Na(j+1);
returnfalse}
elseif(ja==38){
Na(j-1);
returnfalse}
elseif(ja==13||ja==3){
returnfalse}
returntrue}

functionPa(K,ib){
vard=a;
varT=false;
j=-1;
varJ=K.getElementsByTagName(Lb);
varO=J.length;
Z=O;
za=J;
Ca=O;
G=g;
if(g==""||O==0){
F()}
else{
cb()}
varAb="";
if(g.length>0){
varf;
varo;
for(varf=0;
f
functionob(r){
returnYa(r,"offsetLeft")}

functionQb(r){
returnYa(r,"offsetTop")}

functionYa(r,ia){
varkb=0;
while(r){
kb+=r[ia];
r=r.offsetParent}
returnkb}

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

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

functionlb(n){
varN=-1;
if(n.createTextRange){
varfa=document.selection.createRange().duplicate();
N=fa.text.length}
elseif(n.setSelectionRange){
N=n.selectionEnd-n.selectionStart}
returnN}

functionbb(n){
varv=0;
if(n.createTextRange){
varfa=document.selection.createRange().duplicate();
fa.moveEnd("textedit",1);
v=n.value.length-fa.text.length}
elseif(n.setSelectionRange){
v=n.selectionStart}
else{
v=-1}
returnv}

functioncc(d){
if(d.createTextRange){
vart=d.createTextRange();
t.moveStart("character",d.value.length);
t.select()}
elseif(d.setSelectionRange){
d.setSelectionRange(d.value.length,d.value.length)}
}

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

functionl(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}
}

functiondb(){
p=65;
if(w=="query"){
varwb=110;
varSa=Ja();
vartb=(Sa-wb)/Sa*100;
p=tb}
else{
p=65}
if(ya){
p=99.99}
}

functionGb(i){
db();
varUb="font-size:13px;
font-family:arial,sans-serif;
word-wrap:break-word;
";
varVb="display:block;
padding-left:3;
padding-right:3;
height:16px;
overflow:hidden;
";
varbc="background-color:white;
";
varqb="background-color:#3366cc;
color:white!important;
";
varub="display:block;
margin-left:0%;
width:"+p+"%;
float:left;
";
varGa="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")}

functionrb(i,cs,Hb){
while(i.childNodes.length>0)i.removeChild(i.childNodes[0]);
for(varf=0;
f
functionD(name,gb){
if(Ka){
varI=document.styleSheets[0];
if(I.addRule){
I.addRule(name,gb)}
elseif(I.insertRule){
I.insertRule(name+"{
"+gb+"}
",I.cssRules.length)}
}
}

functionjb(){
varA=null;
try{
A=newActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{
A=newActiveXObject("Microsoft.XMLHTTP")}
catch(oc){
A=null}
}
if(!A&&typeofXMLHttpRequest!="undefined"){
A=newXMLHttpRequest()}
returnA}

functionfc(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){
varframeElement=B;
if(k.responseText.charAt(0)=="<"){
W--}
else{
eval(k.responseText)}
}
}

;
k.send(null)}
}

functionS(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---bestbuy
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---onlinedictionary
p---parishilton
q---quotes
r---recipes
s---spybot
t---tarareid
u---ups
v---verizon
w---weather
x---xbox
y---yahoo
z---zipcodes
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值