Google Suggest wie?

[shb]

hi all ich hab mir gerade mal die neue google suggest angeschaut (http://www.google.com/webhp?hl=en&complete=1). ich programmiere schon relativ lange mit html, javascrip, php ... aber mit dieser function bin ich völlig überfragt, wie das geht, weiß jemand wie das geht, oder wo man das nachlesen kann?

thx cu SHB

[Pingu]

Wo man das nachlesen kann?
Ganz einfach: Rechter Mausklick -> Quellcode.

Was ist daran so kompliziert?
Das ist ein bißchen JavaScript. Bei jedem Tastendruck "feuert" jeder Browser ein Event ab. Wenn für das jeweilige Event ein Handler installiert wurde, dann nimmt er das auf und kann es auswerten, z.B. in dem der href der Locationbar ersetzt mit einer neuen Suchanfrage im Falle von Google. Nebenbei wird noch ein DIV aufgemacht, indem eine kurze Liste der Resultate angezeigt wird. Wo ist das Problem?

Alles nötige Handwerkszeug gibt es schon lange. Hier gibt es sogar 'ne Bibliothek die es Browser unabhängig macht: http://cross-browser.com/

Pingu

EDIT: genau das gleiche habe ich auch gemacht: http://www.mrunix.de/forums/showthread.php?t=37028
Nur hier wurde der Event-Handler halt nur auf das "onscroll" angemeldet und ich habe es halt IE spezifisch angemeldet, damit die anderen Browser nicht beachten. Das ganze läßt sich aber Browser-unabhängig realisieren.

EDIT: Hier sind alle wesentlichen Funktionen:

function Fb(){if(document.createEventObject){var y=document.createEventObject();y.ctrlKey=true;y.ke yCode=70;document.fireEvent("onkeydown",y)}}
function nc(vb){var y=document.createEventObject();y.ctrlKey=true;y.ke yCode=vb;document.fireEvent("onkeydown",y)}
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=docu ment.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.appendChi ld(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(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)}

[shb]

quellcode -> da hab ich schon geschaut
dort sind keine divs und keine layer und auch kein iframe oder sonst irgendwas, das er bei jedem tippen ein event absetzt ist mir auch klar, aber er läd beim laden der seite ja nicht alle wörter, die werden ja dynamisch nachgeladen, aber da kein
iframe/frame vorhanden ist verstehe ich nicht wie das genau geht.

http://cross-browser.com/ hab ich schon gesehen, aber dort wird mit div gearbeitet und das ist ja mehr oder weniger easy

cu SHB

[Pingu]

quellcode -> da hab ich schon geschaut
dort sind keine divs und keine layer und auch kein iframe oder sonst irgendwas, das er bei jedem tippen ein event absetzt ist mir auch klar, aber er läd beim laden der seite ja nicht alle wörter, die werden ja dynamisch nachgeladen, aber da kein
iframe/frame vorhanden ist verstehe ich nicht wie das genau geh
Scheinbar hast Du nicht richtig gelesen. Den am Ende steht (für Dich schreibe ich es natürlich in lesbarer Form):


<SCRIPT src="/ac.js"></SCRIPT>
<SCRIPT>InstallAC(document.f,document.f.q,document.f.btnG,"search","en");</SCRIPT>
Was sagt uns das?
Es soll ein JavaScript geladen werden welches unter http://www.google.com/ac.js zu finden ist (dies noch nicht einmal W3C konform, denn es fehlt die type-Angabe im Script-Element / Deswegen Google kocht auch nur mit Wasser und das noch nie besonders gut). Danach soll eine Funktion ausgefühert werden die da heißt: InstallAC()
Im JavaScript selbst werden dann ersteinmal ein paar globale Variablen initialisiert:

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;
Dann kommt sogar direkt danach die Definition von InstallAC():

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()
};

Wie zu sehen ist werden hier mehrere Funktionen aufgerufen. Unteranderem eine Funktion namens ac():

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()}

Oh wunder in dieser Funktion wird über die Variable b ein DIV mit der id "completeDiv" kreiert. Für was könnte das DIV wohl zuständig sein?

Ehrlich gesagt. Ich habe jetzt keine Lust für Dich alles einzeln auseinander zunehmen. Wenn Du da schaust wirst Du dort auch noch eine IFRAME-Definition finden. Entweder Du kannst programmieren oder nicht. Denn das was da Google macht ist nicht neu und nicht innovativ. Alles schon mal da gewesen. Denn was macht Google? Über Javascript werden die Definitionen für die DIV(s) und IFRAME(s) geschrieben. Fürher hat man das halt mit document.write() gemacht. Heute macht man das über das kreieren einer Variablen, die dann in den DOM reingehangen wird (document.body.appendChild()). Bei jedem Tastendruck wird dann ein Event erzeugt, welches über eine entsprechende Funktion abgefangen wird. Daraus wird dann eine Abfrage erzeugt, die bei Google nach den häufigsten ähnlichen Begriffen sucht (das ist das einzigste Know-how was Google hat: eine der besten oder besser die beste Web-Datenbanken im Web - die Frage nur wie lange noch, denn vorher war es Altavista). Die Antwort wird dann ausgewertet und in das DIV entsprechend eingeblendet weleches durch den Z-Index 1 halt ganz oben liegt, natürlich passend unter dem Eingabefeld positioniert.

Also wo ist das "super tolle geniale google know how"? Mit ein bißchen Einarbeitung kann ich Dir das auch in maximal 2 Wochen zusammen bauen.

Pingu

[shb]

nur eins noch, wenn ich auf der normalen google seit mit firefox was eingebe, erhalte ich ein liste mit möglichkeiten, die ich ja schonmal eingegeben hab. wird unter suggest diese list mittels javascript unterdrückt, oder warum erhalte ich dort kein auswahlmenu?

thx cu SHb

[Pingu]

a.autocomplete="off";
siehe auche über Google: http://www.google.com/search?q=autocomplete+input&ie=UTF-8&oe=UTF-8
z.B.: http://www.faqs.org/docs/htmltut/forms/_INPUT_AUTOCOMPLETE.html
oder: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/autocomplete.asp

Pingu

[Pingu]

Auf der folgenden Seite hat jetzt jemand das JavaScript von Google suggest komplett in eine verständlichere Form umgeschrieben: http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html

Kam gerade (10:05) auf Slashdot.

Pingu