JavaScript Wie Texteingabe "zwischenspeichern"?

[Mr. Snoot]

edit: Problem gelöst

Hio,

bei der Suchfunktion auf meiner HP gibts bei Texteingabe eine Vorschlagsliste mit Wörtern ("Google Suggest").

Im Moment ist es so, dass der Benutzer mit den Pfeiltasten durch die Liste navigieren kann und wenn er am unteren Ende angekommen ist, fängt es wieder oben mit dem ersten Eintrag an (bzw. natürlich auch andersrum).

Jetzt würd ich's aber gerne so einrichten, dass, wenn der Benutzer ganz unten ist und noch einmal runter drückt, nicht der erste Eintrag ausgewählt wird, sondern die ursprüngliche Eingabe im Feld angezeigt wird. Man hat also bspw. 'w' eingegeben, drückt 10 mal Pfeil runter - wobei jedesmal das jeweilige Wort ins Textfeld übernommen wird - und wenn man noch einmal runter drückt, soll wieder 'w' angezeigt werden.

Wie kann ich mir die ursprüngliche Eingabe merken?

Mein erster Ansatz war, die ursprüngliche Eingabe einfach als unsichtbaren 11. Eintrag ans Ende der Liste einzufügen. Man drückt also 10 mal runter, und beim 11. mal wird der unsichtbare Eintrag = die ursprüngliche Eingabe ausgewählt.

Das klappt auch - aber dann gibt es ein Problem, wenn man direkt nach der Texteingabe nach oben drückt um ans Ende der Liste zu kommen. Denn dann wird nicht der 10. Eintrag ausgewählt, sondern der unsichtbare 11.; D.h. man bekäme zuerst seine eigene Eingabe erneut zu sehen; müsste also zweimal nach oben drücken um die #10 zu bekommen.

Analog gibt's das Problem natürlich auch in die andere Richtung; für diesen Fall bräuchte ich einen unsichtbaren 1. Eintrag, der aber natürlich dann stört, wenn man nach der Eingabe nach unten drückt.


Der Code um mit den Pfeiltasten durch die Liste zu navigieren sieht so aus:

    switch (curKey)
    {
      case 38: // hoch
      if(curElement && !curElement.previousSibling)
      {
        curElement = naviElement.lastChild;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6990b6';
        curElement.firstChild.style.color = '#FFF';

        firstElement = naviElement.firstChild;
        var farbe = (naviElement.firstChild.className == "lev") ? '#900' : '#000';
        firstElement.style.backgroundColor = '';
        firstElement.firstChild.style.color = farbe;
      }
      else if(curElement && curElement.previousSibling)
      {
        curElement = curElement.previousSibling;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6990b6';
        curElement.firstChild.style.color = '#FFF';

        if(curElement.nextSibling)
        {
          var farbe = (curElement.nextSibling.className == "lev") ? '#900' : '#000';
          curElement.nextSibling.firstChild.style.color = farbe;
          curElement.nextSibling.style.backgroundColor = '';
        }
      }
      else if(!curElement)
      {
        curElement = naviElement.lastChild;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6990b6';
        curElement.firstChild.style.color = '#FFF';
      }
      break;

      case 40: // runter
      if(curElement)
      {
        if(!curElement.nextSibling)
        {
          curElement = naviElement.firstChild;
          document.getElementById(txt_id).value = curElement.firstChild.id;
          curElement.style.backgroundColor = '#6990b6';
          curElement.firstChild.style.color = '#FFF';

          var farbe = (naviElement.lastChild.className == "lev") ? '#900' : '#000';
          lastElement = naviElement.lastChild;
          lastElement.style.backgroundColor = '';
          lastElement.firstChild.style.color = farbe;

        }
        else if(curElement.nextSibling)
        {
          curElement = curElement.nextSibling;
          document.getElementById(txt_id).value = curElement.firstChild.id;
          curElement.style.backgroundColor = '#6990b6';
          curElement.firstChild.style.color = '#FFF';

          if(curElement.previousSibling)
          {
            var farbe = (curElement.previousSibling.className == "lev") ? '#900' : '#000';
            curElement.previousSibling.firstChild.style.color = farbe;
            curElement.previousSibling.style.backgroundColor = '';
          }
        }
      }
      else
      {
        curElement = naviElement.firstChild;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6990b6';
        curElement.firstChild.style.color = '#FFF';
      }
      break;

Any suggestions ?

edit: Problem gelöst

Hab jetzt doch wie geplant am Anfang und am Ende einen unsichtbaren Eintrag mit der der Benutzereingabe eingefügt. Der wird dann einfach aus der einen Richtung benutzt, und aus der jeweils anderen übersprungen.