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

Javascript
javascript innerText和innerHtml应用
图像替换新技术 状态域方法
JavaScript 判断判断某个对象是Object还是一个Array
Extjs 几个方法的讨论
JavaScript 学习笔记(十五)
javascript 匿名函数的理解(透彻版)
Jquery 常用方法经典总结
jquery 批量上传图片实现代码
javascript中的array数组使用技巧
详细讲解JS节点知识
javascript让setInteval里的函数参数中的this指向特定的对象
javaScript 关闭浏览器 (不弹出提示框)
对字符串进行HTML编码和解码的JavaScript函数
javascript 三种编解码方式
js左侧多级菜单动态的解决方案
JavaScript 学习笔记(十六) js事件
JavaScript面向对象之静态与非静态类
javascript两段代码,两个小技巧
js中鼠标滚轮事件详解(firefox多浏览器)
js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 94 ::
收藏到网摘: 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泄露使用者的过多隐私是很多人关注的话题吧