当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Google Suggest ;-) 基于js的动态下拉菜单

Javascript
javascript options属性集合操作代码
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
javascript 显示当前系统时间代码
firefox和IE系列的相关区别整理 以备后用
extJs 常用到的增,删,改,查操作代码
Javascript 面向对象特性
JavaScript的public、private和privileged模式
通过javascript设置css属性的代码
javascript iframe编程相关代码
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
js DOM模型操作
js 学习笔记(三)
用js做一个小游戏平台 (一)
jquery UI 1.72 之datepicker
jQuery的三种$()
JavaScript 常用函数
用javascript实现源代码的隐藏与解密的方法
javascript Onunload与Onbeforeunload使用小结
Javascript的闭包
JavaScript 对Cookie 操作的封装小结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 152 ::
收藏到网摘: n/a

基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中。
能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录。试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤。
另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图:mail_dropdown.png
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泄露使用者的过多隐私是很多人关注的话题吧