JS Combobox bei google-suggests

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

16.12.2004 - 09:22

Eine Combobox die Eingabe und Suggestion per JS in einem bietet gibts bei http://www.google.com/webhp?complete=1

Jemand Lust so etwas generisch zu implementieren?

// edit:
aha, geht nur im mozilla oder so, IE nicht. Na wurscht, Interessenfrage bleibt bestehen, wer also was mit JS DOM drauf hat bei mir melden, hab auch schon Prototype-Code rumliegen der auch IE funzt.

Bearbeitet von Rektal am 16.12.2004, 09:46

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

16.12.2004 - 10:48

inwiefern "generisch"? für alle browser? für eigene Anwendung?
sowas ähnliches haben mat und ich (unabhängig) schon geproged, nur mit tab als completion... maybe primitiver, aber zumindest meins hat auch am IE gefunkt...

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

16.12.2004 - 11:07

Ja, generisch fuer alle Browser soweits halt geht und unabhaengig von einer Applikation, d.h. Style per CSS usw.

Wichtige Aspekte sind halt Useability, Keyword Navigation. Meine Variante hatte kein TAB completition sondern ein earliest match filtern. D.h. die Liste wurde geschrumpft auf die Uebereinstimmungen die eingegeben wurden.

Wobei, diese Art der Funktionsweise soll nicht starr ins Combobox rein. Sie soll abhaengig von aufrufen beim Constructor eben so oder so funktionierne.

Hast du Moeglichkeit (Interesse?) deine/eure Variante online zu stellen? Ich glaub ich komm bis morgen dazu.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

16.12.2004 - 11:26

bin derzeit nicht in Reichweite meines Desktops... wird zeit dass ich nen server @home installier'...

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

16.12.2004 - 14:02

hab sowas mal 1999 mit den damaligen Javascript-möglichkeiten realisiert. damit das bei ~1000 einträgen auch noch performant funktioniert, müssen die daten sortiert sein, und es wird eine binärsuche darauf ausgeführt. ausserdem gibt es eine kurze tastatur-verzögerung, damit gleich mehrere aufeinmal eingegebene zeichen berücksichtigt werden können.
entspricht aber nicht mehr ganz den heutigen web- und codings-standards (damals konnte man noch kein dhtml,dom,css etc.. brauchbar verwenden; dafür ist das ding ns3 oder ns4 kompatibel

)
s1a.html (as text) machbarkeitsstudie

//edit: ok.. heute braucht man sich bei 1000 elementen bei JS nicht mehr den kopf zerbrechen... auf den damaligen rechnern und implementationen leider schon.

Bearbeitet von atrox am 16.12.2004, 14:05

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

16.12.2004 - 22:39

Kewl, danke!

**** is seh grad das mein Code ueberhaupt nix mehr geht. Hab da wohl mitten im Rewrite aufgehoert ...

Wichtige Anforderungen sind fuer mich:
* Sauberer Code, muss nur auf Browsern ab der 5er Generation lauffaehig sein
* soll so wenig wie noetig zusaetzlichen mark-up im html brauchen. am besten nur ein aufruf in JS "nimm das input element mit der ID, es ist ab jetzt eine combobox" (o.ae.), den Rest macht er mit DOM
* soll aber trotzdem auch mit bestehenden input/select kombinatinen zur emulation zurechtkommen, so dass du im endeffekt sagen kannst, wenn JS nicht geht oder ausreicht, funktioniert das UI immer noch
* nicht nur maus-input sondern auch navigation per tastatur soll in vollem unfang gewaehrt werden
* soll verschiedene typen/varianten unterstuetzen:
* variante 1:
bei Eingabe von zeichen geht die Selection automatisch auf mit allen vordefinierten moeglichkeiten und fokusiert den best-match eintrag
* variante 2:
bei Eingabe von zeichen geht die Selection automatisch auf mit eintraegen die matchen, wenn keine matchen geht keine selection-box auf
* variante 3:
bei Eingabe von zeichen geht die Selection nicht auf, aber der beste match wird in der eingabe gezeigt, mit cursor tasten kann man vorhergehenden, naechsten match auswaehlen
* variante X:
...

Wobei hier gesagt sein sollte, dass hier keine echte selection-box aufgeht, da diese den Anforderungen (vor allem im IE) nicht entspricht.

Ziel (meines zumindest) ist es, ein Element zu erschaffen dass so gut wie geht den Desktop-Widgets entspricht, die man in div. Anwendungen (z.B. Access, GTK+) sehen kann, und sich auch so anfuehlt. Ich ziele damit auch net unbedingt auf normale Webseiten ab sondern durchaus eher fuer Backend/Admin-Applikationen.

Der Enthusiasmus kommt nicht von ungefaehr sondern vom WHAT-WG Projekt ( http://whatwg.org/ ), das an einer Weiterentwicklung von Formularen in Browsern arbeitet.

combo-dummy_70000.png (downloaded 36x)

that

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

17.12.2004 - 00:46

Das Google-Ding geht erstaunlich schnell, fast in Realtime. Ich bin beeindruckt.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

17.12.2004 - 07:22

Das Google scheint mir tatsächlich die Suche anzuwerfen (zumindest indirekt), jedenfalls konnte ich in Source bis jetzt keine der sonst bei solchen Anwendungen üblichen PHP-Generierten Listen finden, was mir wieder beweist dass Google echte Innovationen bietet.
Wie sie es allerdings schaffen dass sie mit JavaScript "externe" Seiten (dh. Seiten, die nicht "durch" den Browser geladen werden) auswerten können - etwas ähnliches wird ja auch bei gMail gemacht imho - ist mir noch nicht ganz klar...

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

17.12.2004 - 07:52

bei gmail ladet er von extern code herein, der dann den bereits geladenen code aufruft und html generiert. ganz ähnlich hier, nur über ein verstecktes iframe:

Code:

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

in einem hidden-div wird ein iframe erzeugt, in das http://www.google.com/complete/sear...js=true&qu=<suchstring> geladen wird. zurück kommt ein stückhen GZIPtes JS-code:

Code:

sendRPCDone(frameElement, "overclockers", 
new Array("overclockers", "overclockers uk", "overclockers.co.uk",
 "overclockers.com", "overclockers australia", "overclockers club", 
"overclockers forum", "overclockers cafe", "overclockersclub", 
"overclockers forums"), 
new Array("643,000 results", "166,000 results", "1 result", "1 result", 
"138,000 results", "127,000 results", "430,000 results", "33,800 results", 
"120,000 results", "515,000 results"),
new Array(""));

//edit1:
das ganze geht so schnell, weil
a) es über eine keep-alive connection geschieht, und daher nicht für jeden tastendruck eine neue connection geöffnet werden muss
b) google wohl eine eigene lookuptable für die wörter hat, und nicht jedesmal die "volle" googlesuche bemüht werden muß. dafür spricht zb. daß die anzahl der results gerundet ist.

//edit2:
"google suggest" hat einen eingebauten adult-filter, damit ja niemanden auf falsche gedanken kommt

Bearbeitet von atrox am 17.12.2004, 08:02

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

17.12.2004 - 08:17

Das ad-hoc suchen ist nicht neu, wurde schon vor einigen Monaten auf z.B. http://blog.bitflux.ch/ eingefuehrt.

Wie gesagt, mir ist wichtig die DateSource zu abtrahieren, da soll jeder sein Knoedel ruhig selber formen. Der einige HArd-Coded, er naechste XML, der naechste wieder anders.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

17.12.2004 - 09:11

@atrox: Darn, daran hab ich nicht gedacht... Hätt' ich mir doch denken können, dass die sowas gemacht haben... :rolleyes:

@Rektal: Maybe hab' ich Lust am WE was zu machen... "All Browser" wird aber wohl länger dauern... Gibts Input-Vorgaben?

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

17.12.2004 - 09:22

Hier ist diese halb-halb Version, ziemlich verkorkst nach dem halben Rewrite :/ -> http://markus.fischer.name/tmp/combobox/combobox.php
Das misc.js ist gross-teils fuer fehlende DOM implementationen oder/und X-Browser DOM, der Core-Teil ist in combobox.js. Ist aber gut moeglich dass das ganze so gut wie unbrauchbar fuer aussenstehende ist.

@watchout: was meinst du mit input-Vorgaben?

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

17.12.2004 - 11:26

Zitat von Rektal
@watchout: was meinst du mit input-Vorgaben?

Ich meinte damit z.B. welches Format der Input haben soll, sowie welche Daten ich habe mit denen ich arbeiten kann - sowie "Runtime Parameter" Vorgaben (wie zB Delay-Time bis das Script nach Ergebnissen sucht...)

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

17.12.2004 - 12:20

Naja, Konfigurierbar

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

17.12.2004 - 16:20

Zitat von Rektal
Naja, Konfigurierbar

Und was soll konfigurierbar sein? Nein lass mich raten... das soll konfigurierbar sein, oder?

Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	16.12.2004 - 09:22 Eine Combobox die Eingabe und Suggestion per JS in einem bietet gibts bei http://www.google.com/webhp?complete=1 Jemand Lust so etwas generisch zu implementieren? // edit: aha, geht nur im mozilla oder so, IE nicht. Na wurscht, Interessenfrage bleibt bestehen, wer also was mit JS DOM drauf hat bei mir melden, hab auch schon Prototype-Code rumliegen der auch IE funzt. Bearbeitet von Rektal am 16.12.2004, 09:46
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	16.12.2004 - 10:48 inwiefern "generisch"? für alle browser? für eigene Anwendung? sowas ähnliches haben mat und ich (unabhängig) schon geproged, nur mit tab als completion... maybe primitiver, aber zumindest meins hat auch am IE gefunkt...
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	16.12.2004 - 11:07 Ja, generisch fuer alle Browser soweits halt geht und unabhaengig von einer Applikation, d.h. Style per CSS usw. Wichtige Aspekte sind halt Useability, Keyword Navigation. Meine Variante hatte kein TAB completition sondern ein earliest match filtern. D.h. die Liste wurde geschrumpft auf die Uebereinstimmungen die eingegeben wurden. Wobei, diese Art der Funktionsweise soll nicht starr ins Combobox rein. Sie soll abhaengig von aufrufen beim Constructor eben so oder so funktionierne. Hast du Moeglichkeit (Interesse?) deine/eure Variante online zu stellen? Ich glaub ich komm bis morgen dazu.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	16.12.2004 - 11:26 bin derzeit nicht in Reichweite meines Desktops... wird zeit dass ich nen server @home installier'...
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	16.12.2004 - 14:02 hab sowas mal 1999 mit den damaligen Javascript-möglichkeiten realisiert. damit das bei ~1000 einträgen auch noch performant funktioniert, müssen die daten sortiert sein, und es wird eine binärsuche darauf ausgeführt. ausserdem gibt es eine kurze tastatur-verzögerung, damit gleich mehrere aufeinmal eingegebene zeichen berücksichtigt werden können. entspricht aber nicht mehr ganz den heutigen web- und codings-standards (damals konnte man noch kein dhtml,dom,css etc.. brauchbar verwenden; dafür ist das ding ns3 oder ns4 kompatibel ) s1a.html (as text) machbarkeitsstudie //edit: ok.. heute braucht man sich bei 1000 elementen bei JS nicht mehr den kopf zerbrechen... auf den damaligen rechnern und implementationen leider schon. Bearbeitet von atrox am 16.12.2004, 14:05
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	16.12.2004 - 22:39 Kewl, danke! **** is seh grad das mein Code ueberhaupt nix mehr geht. Hab da wohl mitten im Rewrite aufgehoert ... Wichtige Anforderungen sind fuer mich: * Sauberer Code, muss nur auf Browsern ab der 5er Generation lauffaehig sein * soll so wenig wie noetig zusaetzlichen mark-up im html brauchen. am besten nur ein aufruf in JS "nimm das input element mit der ID, es ist ab jetzt eine combobox" (o.ae.), den Rest macht er mit DOM * soll aber trotzdem auch mit bestehenden input/select kombinatinen zur emulation zurechtkommen, so dass du im endeffekt sagen kannst, wenn JS nicht geht oder ausreicht, funktioniert das UI immer noch * nicht nur maus-input sondern auch navigation per tastatur soll in vollem unfang gewaehrt werden * soll verschiedene typen/varianten unterstuetzen: * variante 1: bei Eingabe von zeichen geht die Selection automatisch auf mit allen vordefinierten moeglichkeiten und fokusiert den best-match eintrag * variante 2: bei Eingabe von zeichen geht die Selection automatisch auf mit eintraegen die matchen, wenn keine matchen geht keine selection-box auf * variante 3: bei Eingabe von zeichen geht die Selection nicht auf, aber der beste match wird in der eingabe gezeigt, mit cursor tasten kann man vorhergehenden, naechsten match auswaehlen * variante X: ... Wobei hier gesagt sein sollte, dass hier keine echte selection-box aufgeht, da diese den Anforderungen (vor allem im IE) nicht entspricht. Ziel (meines zumindest) ist es, ein Element zu erschaffen dass so gut wie geht den Desktop-Widgets entspricht, die man in div. Anwendungen (z.B. Access, GTK+) sehen kann, und sich auch so anfuehlt. Ich ziele damit auch net unbedingt auf normale Webseiten ab sondern durchaus eher fuer Backend/Admin-Applikationen. Der Enthusiasmus kommt nicht von ungefaehr sondern vom WHAT-WG Projekt ( http://whatwg.org/ ), das an einer Weiterentwicklung von Formularen in Browsern arbeitet. combo-dummy_70000.png (downloaded 36x)
that Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	17.12.2004 - 00:46 Das Google-Ding geht erstaunlich schnell, fast in Realtime. Ich bin beeindruckt.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	17.12.2004 - 07:22 Das Google scheint mir tatsächlich die Suche anzuwerfen (zumindest indirekt), jedenfalls konnte ich in Source bis jetzt keine der sonst bei solchen Anwendungen üblichen PHP-Generierten Listen finden, was mir wieder beweist dass Google echte Innovationen bietet. Wie sie es allerdings schaffen dass sie mit JavaScript "externe" Seiten (dh. Seiten, die nicht "durch" den Browser geladen werden) auswerten können - etwas ähnliches wird ja auch bei gMail gemacht imho - ist mir noch nicht ganz klar...
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	17.12.2004 - 07:52 bei gmail ladet er von extern code herein, der dann den bereits geladenen code aufruft und html generiert. ganz ähnlich hier, nur über ein verstecktes iframe: Code: `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);` in einem hidden-div wird ein iframe erzeugt, in das http://www.google.com/complete/sear...js=true&qu=<suchstring> geladen wird. zurück kommt ein stückhen GZIPtes JS-code: Code: `sendRPCDone(frameElement, "overclockers", new Array("overclockers", "overclockers uk", "overclockers.co.uk", "overclockers.com", "overclockers australia", "overclockers club", "overclockers forum", "overclockers cafe", "overclockersclub", "overclockers forums"), new Array("643,000 results", "166,000 results", "1 result", "1 result", "138,000 results", "127,000 results", "430,000 results", "33,800 results", "120,000 results", "515,000 results"), new Array(""));` //edit1: das ganze geht so schnell, weil a) es über eine keep-alive connection geschieht, und daher nicht für jeden tastendruck eine neue connection geöffnet werden muss b) google wohl eine eigene lookuptable für die wörter hat, und nicht jedesmal die "volle" googlesuche bemüht werden muß. dafür spricht zb. daß die anzahl der results gerundet ist. //edit2: "google suggest" hat einen eingebauten adult-filter, damit ja niemanden auf falsche gedanken kommt Bearbeitet von atrox am 17.12.2004, 08:02
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	17.12.2004 - 08:17 Das ad-hoc suchen ist nicht neu, wurde schon vor einigen Monaten auf z.B. http://blog.bitflux.ch/ eingefuehrt. Wie gesagt, mir ist wichtig die DateSource zu abtrahieren, da soll jeder sein Knoedel ruhig selber formen. Der einige HArd-Coded, er naechste XML, der naechste wieder anders.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	17.12.2004 - 09:11 @atrox: Darn, daran hab ich nicht gedacht... Hätt' ich mir doch denken können, dass die sowas gemacht haben... @Rektal: Maybe hab' ich Lust am WE was zu machen... "All Browser" wird aber wohl länger dauern... Gibts Input-Vorgaben?
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	17.12.2004 - 09:22 Hier ist diese halb-halb Version, ziemlich verkorkst nach dem halben Rewrite :/ -> http://markus.fischer.name/tmp/combobox/combobox.php Das misc.js ist gross-teils fuer fehlende DOM implementationen oder/und X-Browser DOM, der Core-Teil ist in combobox.js. Ist aber gut moeglich dass das ganze so gut wie unbrauchbar fuer aussenstehende ist. @watchout: was meinst du mit input-Vorgaben?
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	17.12.2004 - 11:26 Zitat von Rektal @watchout: was meinst du mit input-Vorgaben? Ich meinte damit z.B. welches Format der Input haben soll, sowie welche Daten ich habe mit denen ich arbeiten kann - sowie "Runtime Parameter" Vorgaben (wie zB Delay-Time bis das Script nach Ergebnissen sucht...)
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	17.12.2004 - 12:20 Naja, Konfigurierbar
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	17.12.2004 - 16:20 Zitat von Rektal Naja, Konfigurierbar Und was soll konfigurierbar sein? Nein lass mich raten... das soll konfigurierbar sein, oder?

JS Combobox bei google-suggests

Forum Index > Software > Coding Stuff

Rektal

watchout

Rektal

watchout

atrox

Rektal

that

watchout

atrox

Rektal

watchout

Rektal

watchout

Rektal

watchout