Beispiel für Vorschlagsfelder

Hallo,

habe in Textfeld, in das ich einen Text eingebe, z.B. "Frankfurt". Habe
zusätzlich noch ein Array, wo verschiedene Werte drin stehen, also z.B.
Frankental, Franken, Frankreich.
Nun möchte ich gerne, dass beim Eingeben von "Fran" alle passenden
Einträge angezeigt werden (Hier alle, die auch mit "Fran" anfangen).
Also ein Menü unterhalb der Textbox aufgeht und dort die Einträge
untereinander angezeigt werden (Vorschlagsfelder). Der User sollte nun
mit dem Cursor nach unten die verschiedenen Einträge auswählen können
und mit Enter den Link hinter dem Eintrag aktivieren.

Kennt jemand ein gutes Beispiel, wo diese Thematik verwirklicht ist und
ich nicht alles neu Erfinden muss?

Danke für alle Antworten.

Thomas Weiler schrieb:

Hallo,

habe in Textfeld, in das ich einen Text eingebe, z.B. "Frankfurt". Habe
zusätzlich noch ein Array, wo verschiedene Werte drin stehen, also z.B.
Frankental, Franken, Frankreich.
Nun möchte ich gerne, dass beim Eingeben von "Fran" alle passenden
Einträge angezeigt werden (Hier alle, die auch mit "Fran" anfangen).
Also ein Menü unterhalb der Textbox aufgeht und dort die Einträge
untereinander angezeigt werden (Vorschlagsfelder). Der User sollte nun
mit dem Cursor nach unten die verschiedenen Einträge auswählen können
und mit Enter den Link hinter dem Eintrag aktivieren.

Kennt jemand ein gutes Beispiel, wo diese Thematik verwirklicht ist und
ich nicht alles neu Erfinden muss?

Google suggest
http://www.google.com/webhp?complete=1&hl=en

Benutzt zwar ajax, ist aber von der Funktion das gleiche.
Wenn du eine einfache Implementierung schreiben willst würde ich dir das
jQuery Framework empfehlen, weil hier die DOM-Funktionen sehr gut zu
verwenden sind.

Danke für alle Antworten.

--
Mathias Haimerl
Zend Certified PHP5 Engineer
webmaster (AT) haimi (DOT) de

Mathias Haimerl wrote:

[...]
Wenn du eine einfache

aber aufgeblähte, fehlerträchtige und inkompatible

Implementierung schreiben willst würde ich dir das
jQuery Framework empfehlen, [...]

http://groups.google.de/groups?as_q=...ing=d&filter=0


PointedEars
--
Was funktioniert in Tabellen bei NN4 wirklich verläßlich? Nicht mal die
Abstürze in Zusammenhang mit Tabellen sind verläßlich, auch wenn sie
häufig vorkommen. (Georg Maaß in dcljs <3D6CCAEC.8060702 (AT) vnett (DOT) de>)

Thomas 'PointedEars' Lahn schrieb:

Mathias Haimerl wrote:
[...]
Wenn du eine einfache

aber aufgeblähte, fehlerträchtige und inkompatible

Implementierung schreiben willst würde ich dir das
jQuery Framework empfehlen, [...]

OK, du sagst andauernd, was man nicht nehmen sollte.
Das ist wenig hilfreich, weil ich lieber etwas nehme, was zu 80%
funktioniert, als etwas, was nicht funktioniert.

Was funktioniert denn also und ist einfach nutzbar um sowas zu
realisieren? Selbst schreiben zählt nicht als Antwort.

br | rb
--
Sie freuten sich riesig, wenn eine Maschine nach sechs Stunden etwas
fertig brachte, wozu jeder Mensch auf der Straße für 2 Cent fähig
gewesen wäre. Anschließend ließen sie sich Bananen- und Sushi-Pizza
kommen und schliefen vor der Tastatur ein. [aus T.P., Heiße Hüpfer]

Ralf Beutler schrieb:

Thomas 'PointedEars' Lahn schrieb:
Mathias Haimerl wrote:
[...]
Wenn du eine einfache

aber aufgeblähte, fehlerträchtige und inkompatible

Implementierung schreiben willst würde ich dir das
jQuery Framework empfehlen, [...]

OK, du sagst andauernd, was man nicht nehmen sollte.
Das ist wenig hilfreich, weil ich lieber etwas nehme, was zu 80%
funktioniert, als etwas, was nicht funktioniert.

Was funktioniert denn also und ist einfach nutzbar um sowas zu
realisieren? Selbst schreiben zählt nicht als Antwort.

Inwiefern zählt es für dich als selberschreiben?

wenn du das <div> für die Ausgabe direkt unter dem Textfeld platzierst
kannst du einen einfachen schnippsel wie

function schlageVor(suchtext) {
suche = new RegExp(/^suchtext/i);
suchfeld = $('#suchfeld_id');
suchfeld.empty();
for (a=0; a<arrSuchbegriffe.length; a++) {
if (arrSuchbegriffe[a].match(suche))
suchfeld.append(arrSuchbegriffe[a]+'<br />';
}
}

Wenn du die Funktion im Textfeld mit onKeyUp="this.value" aufrufst
sollte das funktionieren. Wenn du die Vorschlöäge klickbar machen willst
musst du nur im "append"-Parameter weiteren html-code einfügen, wie z.B.
einen Link.
FÜR DAS BEISPIEL MUSST DU jQuery VERWENDEN.

br | rb

--
Mathias Haimerl
Zend Certified PHP5 Engineer
webmaster (AT) haimi (DOT) de

Mathias Haimerl wrote:

Ralf Beutler schrieb:
Thomas 'PointedEars' Lahn schrieb:
Mathias Haimerl wrote:
[...]
Wenn du eine einfache
aber aufgeblähte, fehlerträchtige und inkompatible

Implementierung schreiben willst würde ich dir das
jQuery Framework empfehlen, [...]
OK, du sagst andauernd, was man nicht nehmen sollte.
Das ist wenig hilfreich, weil ich lieber etwas nehme, was zu 80%
funktioniert, als etwas, was nicht funktioniert.

Was funktioniert denn also und ist einfach nutzbar um sowas zu
realisieren? Selbst schreiben zählt nicht als Antwort.

Inwiefern zählt es für dich als selberschreiben?
wenn du das <div> für die Ausgabe direkt unter dem Textfeld platzierst
kannst du einen einfachen schnippsel wie

function schlageVor(suchtext) {
suche = new RegExp(/^suchtext/i);
suchfeld = $('#suchfeld_id');

Jetzt ersetze man einfach diese Zeile durch

var suchfeld = document.getElementById('suchfeld_id');

deklariere alle übrigen Variablen, und ergänze Feature-Tests wie

function isMethod(o, p)
{
return o && /\b(function|object)\b/i.test(typeof o[p]) && o[p];
}

if (isMethod(document, "getElementById"))
{
var suchfeld = ...
// ...
}

und schon hat man eine Lösung, die besser funktioniert, bei neuen
Browsern und Browserversionen keine Updates braucht[1] und bis zu
93 KiB(!) kleiner ist.

[1] http://PointedEars.de/scripts/test/whatami

FÜR DAS BEISPIEL MUSST DU jQuery VERWENDEN.

Nein, und Deine Shift-Taste ist kapott.


kopfschüttelnd,

PointedEars
--
Nein. Bei zwei nebeneinander angeordneten Bildschirmen ist der rechte
Rand des linken Bildschirms die Mitte des Desktops. Der rechte Rand des
Desktops ist der rechte Rand des rechten Bildschirms, und da geht es
nicht mehr weiter. (Lars Trebing in darw <3E1C9AC9.6233C9CA (AT) ltrebing (DOT) de>)

Mathias Haimerl schrieb:

Ralf Beutler schrieb:
Thomas 'PointedEars' Lahn schrieb:
... aufgeblähte, fehlerträchtige und inkompatible jQuery Framework ...

Was funktioniert denn also und ist einfach nutzbar um sowas zu
realisieren? Selbst schreiben zählt nicht als Antwort.

Inwiefern zählt es für dich als selberschreiben?

Die Frage ist am Thema vorbei.
Es geht darum, welches Framework denn am ehesten zu empfehlen ist. Ich
habe jetzt haufenweise gehört, welche Frameworks in TPLs Augen Mist
sind. Ich hätte gern eine positive Antwort.

Na klar kann man das selber schreiben. Aber irgendwann kommst du auch
auf den Trichter, dass du viele Sachen andauernd machst und fängst an,
ein Framework / eine lib zu schreiben und irgendwann ist sie groß, dass
du sie toll findest, vielleicht sogar veröffentlichst, weil damit viele
Sache einfacher gehen und dann kommt einer und sagt, dass ist aber ein
aufgeblähtes Ding von Framework und auch so inkompatibel und du stehst
dann da und denkst: "Hmmmm, als mir hat es die Arbeit doch ziemlich
erleichtert."

Wenn sich deine Programmierung mit JavaScript darauf beschränkt, hin und
wieder was zu machen, hier eine Formularprüfung, dort mal ein Div
verstecken, hier da mal einen kleine Ajax-Request ... obwohl, ein
einheitliches API wäre doch nicht schlecht, oder?

br | rb
--
Sie freuten sich riesig, wenn eine Maschine nach sechs Stunden etwas
fertig brachte, wozu jeder Mensch auf der Straße für 2 Cent fähig
gewesen wäre. Anschließend ließen sie sich Bananen- und Sushi-Pizza
kommen und schliefen vor der Tastatur ein. [aus T.P., Heiße Hüpfer]