autovervollständigung von textfeldern

[määx]

Hey Leute,
ich möchte eine Textfeld als Suchfeld für Einträge aus einer Datenbank nutzen. Bisher hatte ich das ganze einfach als SELECT-Feld realisiert. Hierbei ist jedoch das problem, dass bei langsammen eintippen der Cursor wieder an den anfang springt (also wenn ich ABC eingeben möchte und zwischen B und C zu lange warte der erste eintrag mit C angezeigt wird.).
Jetzt würde ich also gern ein Textfeld nehmen das immer mit dem ersten passenden eintrag vervollständigt (im prinzip wie die history des eingabefeldes im browser).
Wie kann ich sowas am besten realisieren? Und ist es auch möglich dabei sicherzustellen das im Textfeld nur ein tatsächlich vorhandener datensatz steht und diesem dann wie bei select eine id zuzuordnen?
Hoffe man kann verstehen was ich vor habe :)
schonmal Danke!!
Määx

 

[threadi]

AJAX wäre dafür optimal glaube ich. Bei jedem Tastendruck setzt du eine Anfrage an den Server ab der dir ein oder mehrere Begriffe zurück gibt die du in das Feld einträgst oder unterhalb auflistest. Ähnlich wie bei youtube die Empfehlungen wenn man etwas eingibt. Meinst doch sowas oder?

 

[määx]

hey,
ja genau so etwas meine ich. Wie kann ich den eine solche Vorschlags-Liste generieren? und kann man dann dem Textfeld auch einen anderen wert geben als der angezeigte text? Halt so wie bei SELECT-Felder?
Danke

 

[crash]

Du willst ein Input und darunter eine entsprechend gestaltete Liste anzeigen. Dort hängst du ein Keydown-Event an, bei welchem die Liste leert und versteckt und ein Keyup-Event bei welchem ein XHR an den Server schickt und den Response entsprechend verarbeitet, vorhergehende Request abbricht, die Liste befüllt und anzeigt.

Zu Positionierung der Liste empfehle ich getRealPos():

function getRealPos (element) {
    var x = 0, y = 0, tmp_ele = element, pos;
    for (; tmp_ele != null; x += element.offsetLeft, y += element.offsetTop, tmp_ele = tmp_ele.offsetParent) {
        pos = getRealPos.get_pos(tmp_ele);
        x -= parseInt(pos.x);
        y -= parseInt(pos.y);
    }
    return { x : x, y : y, w : element.offsetWidth, h : element.offsetHeight };
}
getRealPos.get_pos = document.defaultView ? function (obj) {
    var obj_style = obj.ownerDocument.defaultView.getComputedStyle(obj, null);
    return {
        x : obj_style.getPropertyValue("left"),
        y : obj_style.getPropertyValue("top")
    };
} : document.currentStyle ? function (obj) {
    return {
        x : obj.currentStyle.left,
        y : obj.currentStyle.top
    };
} : function (obj) {
    return {
        x : obj.style.left,
        y : obj.style.top
    };
};