Heike: sich anpassende Vorselektion in Auswahlliste

Hallochen,

suche jemanden, der mir sagen kann, wie ich sinnvoll an folgendes Problem herangehe:

Ich möchte auf meiner Webseite haben
1. ein Textfeld, wo der Nutzer was eintippen soll
und
2. eine Auswahlliste, in weit über 500 Begriffe in alphabetischer Reihenfolge hinterlegt sind (aus einer Datenbank)

Und dann sollte, wenn der Nutzer in das Textfeld z.B. ein "F" eintippt, die Vorselektion in der Auswahlliste automatisch auf den ersten Begriff, der mit "F" beginnt springen.
Wenn der Nutzer dann den 2. Buchstaben eintippt, z.B. ein "e", dann sollte die Vorselektion in der Auswahlliste automatisch auf den ersten Begriff, der mit "Fe" beginnt springen. etc. etc. etc.

Wie kann man sowas vernünftig realisieren?

Vielen Dank im Voraus für Euren Input
Heike

  1. Hi Heike

    Wie kann man sowas vernünftig realisieren?

    Hm, schwierig. Hier mal die Tools:

    1.) Key-down-handler für das Textfeld
    2.) handler nimmt das bisher eingegebene Wort und läuft die Liste der options in der select-box durch
    3.) Bei Übereinstimmung die entsprechende option selektieren.

    Gruß

    Hans

    1. Merci für die Info.

      1. ist klar.

      2. realisiere ich am besten im Hintergrund per Skript. Aber geht sowas mit Javaskript User-seitig? Oder muss ich das über den Server und meine Datenbank erledigen? ? Dann müsste ich aber doch die ganze Webseite immer wieder neu aufbauen, oder?

      Und vor allem: was ist besser für den Sever hintendran? Wie belaste ich möglichst wenig den Server und habe trotzdem ein Funktion die für den Nutzer angenehm schnell funktioniert (sozusagen in Eintipp-Schnelle)?

      Gruß Heike

      Hi Heike

      Wie kann man sowas vernünftig realisieren?

      Hm, schwierig. Hier mal die Tools:

      1.) Key-down-handler für das Textfeld
      2.) handler nimmt das bisher eingegebene Wort und läuft die Liste der options in der select-box durch
      3.) Bei Übereinstimmung die entsprechende option selektieren.

      Gruß

      Hans

  2. Hi,

    da wirst du eine Menge von Hand machen müssen.

    1. Mittels onkeyup-Event fangen, dass der Benutzer neuen Text ausgegeben hat
    2. Mittels
      document.getElementById das Textfeld ermitteln und dessen value-Eigenschaft auslesen.
    3. Mittels substring-Methode  das erste Zeichen des Strings ermitteln
    4. Mittels document.getElementById das Select-Element lokalisieren und eine Schleife über die options
      laufen lassen.
    5. Innerhalb dieser for-Schleife den Anfang des Wert (vgl. substring oben) vergleichen, bei Übereinstimmung mit dem gesuchten Anfangsbuchstaben auswählen und die Schleife verlassen.

    MfG
    Rouven

    --
    -------------------
    ie:| fl:| br:> va:| ls:& fo:) rl:( n4:{ ss:) de:] js:| ch:? mo:} zu:|
    1. Hallochen,

      und erstmal tausend Dank für die Info.
      Punkte 1 bis 3 waren mir klar ... über 4 und 5 muss ich jetzt mal nachdenken ;o) und ein wenig ausprobieren.

      Nur grad ncoh 'ne Frage ...
      hast Du evtl. Erfahrung ... verkraftet so 'ne Webseite eigentlich eine Auswahlliste mit 500 bis 1000 Einträgen ohne Probleme????
      Ich meine selbst wenn ich die aus 'ner Datenbank auslese und dynamisch generieren, dann steht letztlich im Broser doch 500-100 mal <option>Eintrag bla bla bla</option>
      oder????
      Da wird der Quelltext aber lang ... motzt da so ein armer kleiner Browser nicht?

      Liebe Grüße
      Heike

      Hi,

      da wirst du eine Menge von Hand machen müssen.

      1. Mittels document.getElementById das Select-Element lokalisieren und eine Schleife über die options
        laufen lassen.
      2. Innerhalb dieser for-Schleife den Anfang des Wert (vgl. substring oben) vergleichen, bei Übereinstimmung mit dem gesuchten Anfangsbuchstaben auswählen und die Schleife verlassen.

      MfG
      Rouven

      1. Hi,

        also die Länge des Quelltextes ist nicht so unbedingt das Problem. Wahrscheinlich geht sogar der Aufbau der Seite (entsprechende Anbindung vorausgesetzt) ziemlich flüssig (wenn der Rechner nicht gerade sehr alt ist), nur das Aufklappen der Dropdown bzw. darin zu scrollen könnte etwas Zeit kosten. Ich gehe allerdings davon aus, dass das kein Unterschied zu einem Windows-Programm ist, da z.B. der Internet Explorer sich der selben Controls bedienen dürfte wie z.B. MS-Access.

        MfG
        Rouven

        --
        -------------------
        ie:| fl:| br:> va:| ls:& fo:) rl:( n4:{ ss:) de:] js:| ch:? mo:} zu:|