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

基本的原理是在当前窗口创建了一个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=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)=="源代码写的非常“拥挤”，我不得不用以下代码做了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
<p>车东[1]和huttmean[2]都说了google搜索建议的好处。<br>[1] <a href="http://www.chedong.com/blog/archives/000028.html#more" rel="nofollow">http://www.chedong.com/blog/archives/000028.html#more</a><br>[2] <a href="http://www.hutteman.com/weblog/2004/12/10-217.html" rel="nofollow">http://www.hutteman.com/weblog/2004/12/10-217.html</a></p><p>车东说得更好。还给了代码。不愧技术派。</p><p>我不在乎这个功能。：）gmail中还是很好<br>用的，因为不用自己记忆email地址了。就<br>像使用本地email程序一样。google中用处<br>不大。</p><p>我写这些是想问个问题。我不是技术派我<br>是较真儿派。：）</p><p>google中不但有提示还有记忆搜索过的条<br>目（或这是浏览器在记忆？）</p><p>1）出于隐私考虑我想禁用google的搜索提<br>示 and/or 记忆怎么办。2）我不禁用。但<br>现在机子要换人使用了，我如何清空的搜<br>索记忆。3)进一步。我想让google认为我<br>这是用另外一台机子上网是只要删除以前<br>google留下的cookie就行了吗？如果是它<br>的cookie怎么找到。如果不是，应该怎么<br>办？</p><p>也许问的问题有的问的不对你大概猜猜我<br>问的是什么吧.:)</p><p>不是每个人都能有一台就自己使用的计算<br>机。而且公有计算机（如在共用的办公室<br>和图书馆中）这个隐私的问题会更突出。</p><p>gmail在出来隐私问题就被批评过（当然其<br>实其它email服务商有的还不如gmail。）<br>现在google太厉害了，说不定比你自己还<br>了解你自己在网上干吗了呢。你说会这样<br>吗，车东？</p><p>回复在：<br><a href="http://www.chedong.com/blog/archives/000028.html#more" rel="nofollow">http://www.chedong.com/blog/archives/000028.html#more</a></p><p>有可能回复抄送邮件更好。hehe<br>不让google泄露使用者的过多隐私是很多人关注的话题吧</p>