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

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 applebbs 的 blog


from google blog



  基本的原理是在当前窗口创建了一个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<=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;

本文关键:Google Suggest 基于JS的动态下拉菜单
  相关方案
Google
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top