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

基本的原理是在当前窗口创建了一个iframe，然后将相关关键词的提示列表在iframe中，并通过列表点选将选定项放到搜索框中。
能这么快的能将所有相关关键词的检索数列出，看来所有的提示词已经提前进行了预搜索和数量记录。试了一下"sex"，没有相关检索提示，看来对搜索词进行了严格的色情过滤。
另外：这一动态列表功能也应用在GMail的地址栏自动输入完成中，如图：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=Z){ C=Z-1} if(j!=-1&&C!=j){ l(h,"aAutoComplete"); j=-1} if(C0){ 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&&pa0)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泄露使用者的过多隐私是很多人关注的话题吧
以上就是Google Suggest 😉 基于js的动态下拉菜单的详细内容，更多请关注本站其它相关文章！