Yeti: ComboBox (und zwar eine richtige!) in HTML

FYI: Eine ComboBox ist eine Kombination aus einem Textfeld und aus einer Drop-Down-Liste (HTML-Tag select).

Am 28. 06. 2004, 09:47 hat Jingle gefragt:
"Hallo zusammen,

ich bräuchte für eine Webseite eine editierbare ComboBox, also eine ComboBox wo man in die oberste Zeile Text eintragen kann. So wie bei der Adressleiste im IE.
In Delphi nennt sich dass glaube ich TComboBox.
[...]"

Habe so etwas auch gebraucht und (leider erst nach Abschluss des Projektes) folgende geniale Anleitung gefunden:
http://www.devguru.com/features/tutorials/ComboControl/combocontrol.html

Es ist zwar ein proprietäres ActiveX-Plugin, aber dafür funktioniert es genial! Wenn Office schon installiert ist, braucht man noch nicht mal irgendetwas runterladen und installieren.
Was mich nur stört, dass das Bevölkern nicht in HTML geht sondern man dafür JScript / VBScript einsetzen muss, dass zudem den Quellcode ziemlich aufbläht.
Aber allemal viel schöner als ein reines Select-Feld mit dem Eintrag "neu eingeben" am Ende, wo sich dann ein Textfeld rechts daneben auftut. Brrrrr.

  1. Hallo Yeti,

    Es ist zwar ein proprietäres ActiveX-Plugin,

    und genau deswegen ist es imho nicht zu gebrauchen.

    Grüße aus Nürnberg
    Tobias

    1. Du hast ja so Recht. Man kann es nur mit Internet Explorer benutzen, also nur rund 95% der Internet-Community, 0% der Freaks aber 100% meiner Anwender. ;-)
      Wenn du eine bessere Möglichkeit kennst, immer her damit!

      Bis es einen (X)HTML-Tag "combo" gibt und dieser von _allen_ Browsern (außer natürlich den heute vorhandenen und weit verbreiteten) unterstützt wird, sehe ich keine andere Möglichkeit. Außer eben ein Select-Feld mit parallelem Textfeld.

      Unter meinen aktuellen Bedingungen (Intranet = Seitengröße egal, alle nutzen IE 5) ist es einfach die bessere Lösung.
      Unter Usability-Gesichtspunkten ist es eindeutig vorzuziehen, da würde Herr Nielsen mir bestimmt zustimmen. Schließlich müssen die User jetzt nicht 300+ Einträge (alphabetisch geordnet, aber trotzdem viel) manuell durchsuchen, sondern bekommen Vorschläge, wenn sie die ersten paar Buchstaben eingeben.
      Und ein neuer Eintrag ist viel leichter anzulegen.

      Also, sag mir deine Lösung und ich setz sie um. Bis dahin...

      Der Yeti

      --
      Habe nun, ach! WInfo, BWL, und Mathe, Und leider auch Info!
      Durchaus studiert, mit heißem Bemühn. Da steh' ich nun, ich armer Thor!
      Und bin so klug als wie zuvor!
      1. Hallo Yeti,

        Du hast ja so Recht. Man kann es nur mit Internet Explorer benutzen, also nur rund 95% der Internet-Community,

        wo hast du die Zahl her?

        Wenn du eine bessere Möglichkeit kennst, immer her damit!

        ich habe so etwas noch nie gebraucht, und wüsste auch nicht wofür :-)

        Bis es einen (X)HTML-Tag "combo" gibt

        _wenn_ es irgendwann eines geben sollte :-)

        und dieser von _allen_ Browsern (außer natürlich den heute vorhandenen und weit verbreiteten) unterstützt wird, sehe ich keine andere Möglichkeit.

        es wird nie in allen Browsern funktionieren, weil es immer Benutzer geben wird die einen alten Browser verwenden werden der es nicht beherscht.

        Unter meinen aktuellen Bedingungen (Intranet = Seitengröße egal, alle nutzen IE 5) ist es einfach die bessere Lösung.

        ja, Intranet ist schon wieder was völlig anderes - hier weißt du, dass das überall funktioniert und somit ist es in Ordnung wenn du es verwendest. Du hast allerdings ein Problem falls mal auf einen anderen Browser umgestellt wird ...

        Unter Usability-Gesichtspunkten ist es eindeutig vorzuziehen, da würde Herr Nielsen mir bestimmt zustimmen. Schließlich müssen die User jetzt nicht 300+ Einträge (alphabetisch geordnet, aber trotzdem viel) manuell durchsuchen, sondern bekommen Vorschläge, wenn sie die ersten paar Buchstaben eingeben.

        in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen

        Grüße aus Nürnberg
        Tobias

        1. Du hast ja so Recht. Man kann es nur mit Internet Explorer benutzen, also nur rund 95% der Internet-Community,
          wo hast du die Zahl her?

          OK, es war der erste Treffer und wahrscheinlich eine Seite mit bestimmter Absicht... http://www.w3schools.com/browsers/browsers_war.asp sagt aber auch ca. 80%.

          ich habe so etwas noch nie gebraucht, und wüsste auch nicht wofür :-)

          Na zum Beispiel, um nicht zwei Felder zu haben für dasselbe Attribut. ;-)
          Entweder aus logischen, Platz- oder Usabilitygründen.

          _wenn_ es irgendwann eines geben sollte :-)

          Richtig.

          es wird nie in allen Browsern funktionieren, weil es immer Benutzer geben wird die einen alten Browser verwenden werden der es nicht beherscht.

          Eben.

          ja, Intranet ist schon wieder was völlig anderes - hier weißt du, dass das überall funktioniert und somit ist es in Ordnung wenn du es verwendest. Du hast allerdings ein Problem falls mal auf einen anderen Browser umgestellt wird ...

          Naja, der IE6 ist auch abwärts kompatibel. ;-) Und solange die hier noch Jahre brauchen um darauf upzugraden (IE 5.01 ist immer noch der aktuellste)...

          in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen

          Ich will aber nicht die Optionsliste kürzen... ich will alle diese schönen Features in einem einzigen Feld vereinigt haben, dass ich mit einer ID ansprechen und dass mir auch nur einen Formulareintrag zurückgibt. :-)

          Grüße zurück aus Köln
          Der Yeti

          --
          Habe nun, ach! WInfo, BWL, und Mathe, Und leider auch Info!
          Durchaus studiert, mit heißem Bemühn. Da steh' ich nun, ich armer Thor!
          Und bin so klug als wie zuvor!
          1. Hallo Yeti,

            OK, es war der erste Treffer und wahrscheinlich eine Seite mit bestimmter Absicht... http://www.w3schools.com/browsers/browsers_war.asp sagt aber auch ca. 80%.

            ich wollte damit sagen, dass man keine Zahl als richtig annehmen kann - hier ist der Anteil noch niedriger: http://stats.selfhtml.org/webalizer/forum.de.selfhtml.org/usage_200408.html#TOPAGENTS ...

            ja, Intranet ist schon wieder was völlig anderes - hier weißt du, dass das überall funktioniert und somit ist es in Ordnung wenn du es verwendest. Du hast allerdings ein Problem falls mal auf einen anderen Browser umgestellt wird ...
            Naja, der IE6 ist auch abwärts kompatibel. ;-) Und solange die hier noch Jahre brauchen um darauf upzugraden (IE 5.01 ist immer noch der aktuellste)...

            ich meine eigentlich einen richtigen Browser (sprich Opera/Mozilla) ...

            in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen
            Ich will aber nicht die Optionsliste kürzen... ich will alle diese schönen Features in einem einzigen Feld vereinigt haben, dass ich mit einer ID ansprechen und dass mir auch nur einen Formulareintrag zurückgibt. :-)

            mit der Optionliste-kürzen-Methode bekommst du auch nur einen Eintrag - das Eingabefeld dient ja nur dazu die ersten Buchstaben anzugeben und wenn man seinen Eintrag in der gekürzten Liste gefunden hat, kann man diesen auswählen und das Forumlar abschicken.

            Grüße aus Nürnberg
            Tobias

        2. Hi,

          in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen

          Naja, so richtig klappt das aber nicht. Wehe, man vertippt sich und korrigiert mit Backspace ...

          cu,
          Andreas

          --
          MudGuard? Siehe http://www.Mud-Guard.de/
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen

            Naja, so richtig klappt das aber nicht. Wehe, man vertippt sich und korrigiert mit Backspace ...

            Was passiert dann bei dir?
            Bei mir wird die Liste dann korrekt angezeigt, oder hab ich was übersehen?

            Struppi.

            1. Was passiert dann bei dir?
              Bei mir wird die Liste dann korrekt angezeigt, oder hab ich was übersehen?

              OK, ich hab's gesehen.

              Struppi.

          2. in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen

            Naja, so richtig klappt das aber nicht. Wehe, man vertippt sich und korrigiert mit Backspace ...

            Danke, behoben.

            Das war aber anscheind nur ein Fehler im Mozilla (bzw. firefox), im IE hat's funktnioniert. Das Problem war die Schleife Rückwärts (while(i--) ) dan hat Firefox die Option Elemente nicht mehr in die Liste eingefügt, man muss es auf jeden Fall von vorne nach hinten machen.

            Struppi.

            1. Hi,

              in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen
              Naja, so richtig klappt das aber nicht. Wehe, man vertippt sich und korrigiert mit Backspace ...

              Danke, behoben.

              Hatte ich gar nicht realisiert, daß das von Dir ist...

              Aber jetzt scheint es tatsächlich zu funktionieren (genau überprüft hab ich es nicht, aber es erscheinen deutlich mehr Elemente bei Backspace wieder als vorher).

              Das war aber anscheind nur ein Fehler im Mozilla (bzw. firefox), im IE hat's funktnioniert.

              Ich benutze einen Browser, keinen veralteten Schrott. ;-)

              cu,
              Andreas

              --
              MudGuard? Siehe http://www.Mud-Guard.de/
              Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        3. Unter Usability-Gesichtspunkten ist es eindeutig vorzuziehen, da würde Herr Nielsen mir bestimmt zustimmen. Schließlich müssen die User jetzt nicht 300+ Einträge (alphabetisch geordnet, aber trotzdem viel) manuell durchsuchen, sondern bekommen Vorschläge, wenn sie die ersten paar Buchstaben eingeben.
          in dem Fall würde ich vermutlich http://home.arcor.de/struebig/js/short/optionliste.htm nehmen

          So nach dem Hinweis Andreas hab ich das Skript verbessert und in den neuen Zweig  eingeordnet:
          http://home.arcor.de/struebig/computer/javascript/source/optionliste.html

          Struppi.

  2. in HTML gibt es keine ComboBox, allerdings kann man mittels JavaScript aus einem Eingabefeld und einer Dropdownliste eine
    basteln:

    <html>
     <head>

    <script type="text/javascript">

    // Aktualisiert das Eingabefeld mit dem ausgewählten Listeneintrag

    function updateInput(sourceobj,targetId){
      document.getElementById(targetId).value=sourceobj.options[sourceobj.selectedIndex].value;
     }

    // Fügt den Inhalt des Eingabefeldes als Option zur Liste hinzu

    function addOption(sourceobj,targetId){
      var name=sourceobj.value;
      var tobj=document.getElementById(targetId);
      var opts=tobj.options;
      var i=0;
      while(i<opts.length && opts[i].value!=name){opts[i].selected="";i++;}
      if(i==opts.length) {
       newopt=document.createElement('option');
       newopt.value=name;
       newopt.innerHTML=name;
       tobj.appendChild(newopt);
      }
      opts.selectedIndex=i;
      opts[i].setAttribute('selected','selected');
     }
      </script>
     </head>

    <body>
      <div>

    <input type="text" id="fontname" value="Tahoma" onChange="addOption(this,'fontlist')"><br>
       <select id="fontlist"  onChange="updateInput(this,'fontname');">
          <option value="Arial Unicode MS">Arial Unicode MS</option>
          <option value="Bitstream Cyberbit">Bitstream Cyberbit</option>
          <option value="Code2000">Code2000</option>
          <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
          <option value="Lucida Sans Typewriter">Lucida Sans Typewriter</option>
          <option value="MS Sans Serif">MS Sans Serif</option>
          <option value="Tahoma" selected="selected">Tahoma</option>
          <option value="Titus Cyberbit Basic">Titus Cyberbit Basic</option>
          <option value="Times New Roman">Times New Roman</option>
       </select>

    </div>
     </body>
    </html>

    Bemerkung: sowohl das input-Element, als auch das select-Element müssen ein eindeutiges "id" Attribut haben.
    <input id="inputname" onChange="addOption(this,selectname)">
    <select id="selectname" onChange="updateInput(this,inputname)">

    1. Richtig. Dieses (oder ein ähnliches Workaround) habe ich bisher auch immer benutzt.
      Wenn man aber will, dass das Textfeld sozusagen genau über dem Selectfeld ist, geht es nicht (zumindest unter Windows, windowed controls...). Das Selectfeld ist auf jeden Fall on-top, egal wie man den z-index auch setzt mit CSS.
      Außerdem beruht das Skript auch auf JavaScript. Igitt! ;-)
      Der Yeti

      --
      Habe nun, ach! WInfo, BWL, und Mathe, Und leider auch Info!
      Durchaus studiert, mit heißem Bemühn. Da steh' ich nun, ich armer Thor!
      Und bin so klug als wie zuvor!