Lude: Use Case "Benutzer wählt schnell unter vielen Listeneinträgen"

Hallo,

ein Surfer muss in der von mir zu entwickelnden Web-Anwendung mehrfach zwischen ca. 1000 Listeneinträgen wählen.
Das select-Element ist anscheinend wenig surferfreundlich, da die offensichtlich beste Wahl eines Listeneintrags durch schnelle Eingabe von Anfangsbuchstaben (z.B. "Ber", wenn "Berlin" ausgewählt werden soll) nicht direkt unterstützt wird und mithilfe von JS implementiert werden muss.

Fragen:
a) Welcher JS-Code würde den Job erledigen (onchange abfangen, timer setzen usw.)? Beispielcode ?     :-)
b) Kann man in HTML andere "Steuerelemente" einbauen, und zwar ohne andere Nachteile (lokale Installation, PerformanceEinbussen...)?
c) Welches "Steuerelement" wäre geeeignet und wo zu beziehen?

Gruss,
Lude

  1. Hallo,

    muss denn der user immer wieder aus dem selben Angebot die selbe wahl treffen?

    wenn ja, dann solltest du diesen wert zwischenspeichern, dazu gibt es hier bei den artikeln einige schöne sachen.
    -location.search
    -frame+variablen
    -window.name

    Ein besseres Steuerelement fällt mir auch nicht ein, aber irgendwo hab ich mal einen webshop gesehen, der originelle steuerelemente im angebot hatte. Die hatten auch mal einen "Gebogenen Frame" im Angebot, die waren aber schnell vergriffen.

    Odium

    1. Hallo,

      nee, es gibt da mehrere verschiedene frisch aus der Datenhaltung eintreffende Arrays. Die Sache läuft im WAN mit dicker Bandbreite.

      Das ist doch ein Standardprob für Entwickler, die "normale Datenbankprogramme" auf "Webbasis" entwicklen müssen/möchten/können...

      Gruss,
      Lude

      Hallo,

      muss denn der user immer wieder aus dem selben Angebot die selbe wahl treffen?

      wenn ja, dann solltest du diesen wert zwischenspeichern, dazu gibt es hier bei den artikeln einige schöne sachen.
      -location.search
      -frame+variablen
      -window.name

      Ein besseres Steuerelement fällt mir auch nicht ein, aber irgendwo hab ich mal einen webshop gesehen, der originelle steuerelemente im angebot hatte. Die hatten auch mal einen "Gebogenen Frame" im Angebot, die waren aber schnell vergriffen.

      Odium

      1. Hallo

        [...]

        Das ist doch ein Standardprob für Entwickler, die "normale Datenbankprogramme" auf "Webbasis" entwicklen müssen/möchten/können...

        Mit "normalem" HTML, JavaScript und HTTP geht es vermutlich nicht so wie Du möchtest. Verwende ActiveX oder Java. Beides sollte genügend Steuerelemente anbieten, welche die von Dir gesuchte Funktionalität aufweisen. Nebenbei kann man damit auch einige andere "Schwierigkeiten" von HTML und Konsorten umschiffen. Bandbreit und Rechnerkonfiguration sollen ja kein Problem sein, wie man hört. :)

        [Tofu gelöscht]

        Gruß Alex
        --
        http://www.google.de/search?hl=de&safe=off&q=Rechtschreibung+Standart

        1. Yo!

          Das ist doch ein Standardprob für Entwickler, die "normale Datenbankprogramme" auf "Webbasis" entwicklen müssen/möchten/können...

          Mit "normalem" HTML, JavaScript und HTTP geht es vermutlich nicht so wie Du möchtest. Verwende ActiveX oder Java. Beides sollte genügend Steuerelemente anbieten, welche die von Dir gesuchte Funktionalität aufweisen. Nebenbei kann man damit auch einige andere "Schwierigkeiten" von HTML und Konsorten umschiffen. Bandbreit und Rechnerkonfiguration sollen ja kein Problem sein, wie man hört. :)

          [Tofu gelöscht]

          Gruß Alex

          http://www.google.de/search?hl=de&safe=off&q=Rechtschreibung+Standart

          :-)
          ActiveX und Java will und darf ich nicht.

          Das muss doch auch mit JS gehen! - Und sollte nicht wirklich komplex sein.

          Gruss,
          Lude

          1. Hallo,

            du hast noch nicht auf die Frage in meinem ersten posting genatwortet...

            ist die auswahl des users dann immer die selbe oder wählt er wirklich was neues...

            man könnte ja auch die einzelnen wahlmöglichkeiten auf verschiedenen nach alphabet geordneten seiten anbieten... jedes select für einen buchstaben... welche anfangsbuchstaben bereits belegt sind könnte man ja in einer textdatei mitführen(du sprachst von dynamisch)

            so hat der user z.B. die wahl zwischen a,b, e
            da nur städte etc. mit diesen anfangsbuchstaben in deiner datenquelle enthalten sind, so wird ein unnötiges durchsuchen von seiten vermieden zu denen noch keine stadt vorhanden ist...

            Odium

            1. Hallo

              du hast noch nicht auf die Frage in meinem ersten posting genatwortet...

              Doch hab ich. Es treffen mehrere Datensatzmengen("Arrays frisch aus der Datenhaltung") der Grösse 1000 Datensätze ein.

              man könnte ja auch die einzelnen wahlmöglichkeiten auf verschiedenen nach alphabet geordneten seiten anbieten... jedes select für einen buchstaben... welche anfangsbuchstaben bereits belegt sind könnte man ja in einer textdatei mitführen(du sprachst von dynamisch)

              Lösungen, die mehrfach neu HTML-Code generieren (z.B. mit Perl), möchte ich nicht. Soll ja nicht komplexer werden, als es muss.

              so hat der user z.B. die wahl zwischen a,b, e
              da nur städte etc. mit diesen anfangsbuchstaben in deiner datenquelle enthalten sind, so wird ein unnötiges durchsuchen von seiten vermieden zu denen noch keine stadt vorhanden ist...

              JS-Beispielcode zur Hand, jemand?

              Odium

              Gruss,
              Lude

              1. Ich bin nicht sicher ob das weiter hilft, aber ich würde das mit einem Array machen. Man gibt in ein Eingabefeld einen Teil des Textes ein und erhält dann durch JavaScript eine weitere Auswahlmöglichkeit (Selection o.ä.).

                Du könntest auch die Arrays in einer externen .js-Datei öfters neu generieren lassen, ohne den HTML/JS-Code ändern zu müssen.

                Vielleicht hilft dir der folgende Code (arbeitet aber nur mit IE).

                <form name="filter" action="javascript:check()">
                 <table align="center" border="5"><tr>
                 <td><input name="name" size="20"></td>
                 <td><input type="button" value="filtern" onClick="check()"></td>
                 </tr></table>
                </form>

                <p id="list" align="center"></p>

                <script>
                function check()
                 {
                  Matrix = new Array();    /* enthält Nummern der Datensätze mit positivem Suchergebnis */
                  filterN = document.filter.name.value;
                  filterN = filterN.toLowerCase();  /* alles in Kleinschreibung */

                filterX = filterN.split(",");

                suchteile = filterX.join("« & »");

                i = 0;
                  for(x = 1; x < data.length; x++)
                   {
                    suche = data[x].join(", ");
                    suche = suche.toLowerCase();  /* alles in Kleinschreibung */

                y = 0;
                    z = filterX.length;
                    for(k = 1; k <= z; k++)
                     {
                      teil = filterX[k-1];
                      if(suche.indexOf(teil) != -1) y++;
                     }
                    if(y == z)
                     {
                      Matrix[i] = x;
                      i++;
                     }
                   }

                switch(Matrix.length)
                   {
                    case 0:
                     Ergebnis = "kein Ergebnis für »" + suchteile + "«<br><br>"; break;
                    case 1:
                     Ergebnis = Matrix.length + " Ergebnis für »" + suchteile + "«:<br><br>"; break;
                    case (data.length - 1):
                     Ergebnis = "Alle Datensätze:<br><br>"; break;
                    default:
                     Ergebnis = Matrix.length + " Ergebnisse für »" + suchteile + "«:<br><br>"; break;
                   }

                lyst = "";
                  for(y = 0; y < Matrix.length; y++)
                   {
                    lyst = lyst + "<tr><td class=" + data[Matrix[y]][1] + ">" + data[Matrix[y]][0] + "</td><td width=30></td><td class=" + data[Matrix[y]][1] + ">" + data[Matrix[y]][1] + "</td><td width=30></td><td class=" + data[Matrix[y]][1] + ">" + data[Matrix[y]][2] + "</td></tr>";
                   }
                  document.all.list.innerHTML = Ergebnis + "<table border=0>" + lyst + "</table>";
                 }

                /* ########## database ########## */
                  data = new Array();
                  data[0] = new Array("Feld1","Feld2","Feld2");
                ...

          2. Moin!

            Das muss doch auch mit JS gehen! - Und sollte nicht wirklich komplex sein.

            Ja, geht auch.

            Du brauchst, wie schon festgestellt, zwei Felder: select und input type=text.

            Und dann geht z.B. sowas:

            function selektieren()
            {
              sel = document.forms[0].auswahl.value;
              for (i=0; i< document.forms[0].stadt.length; i++)
              {
                if (document.forms[0].stadt.options[i].text.indexOf(sel) == 0)
                {
                  document.forms[0].stadt.selectedIndex = i;
                  return;
                }
              }
            }

            <select name="stadt" size="1">
            <option>Aachen</option>
            <option>Augsburg</option>
            <option>Berlin</option>
            <option>Bremen</option>
            <option>Hamburg</option>
            <option>Hannover</option>
            </select>
            <input type="text" name="auswahl" onkeyup="selektieren()">

            Funktioniert ganz prima bei mir.

            - Sven Rautenberg

            1. Schönen Abend zusammen,

              so ein ähnliches Problem habe ich da auch noch zu lösen und habe mich dazu entschlossen, nicht 1000 oder mehr Werte gleich in die Auswahl zu laden, sondern über die erste Wahl (erster Buchstabe) entsprechend vorzuselektieren. Dann sinds nicht mehr so viele.

              Das kann man dann ggf. über ein normales HTML-Browserfenster mit Links erledigen. Es muss dann eben eine solide Korrespondenzstrecke mit dem Server bestehen. Der Vorteil ist, dass das sogar noch auf einem alten 386er oder eben einem Net-Boot-Terminal-TFT abläuft.

              Arbeiten wir vielleicht an dem selben Projekt? Mein Kunde ist eine kleine Fabrik in der Nähe von BS... Wäre nicht das erste Mal, dass ich sowas nebenbei rausfinde. ;-))

              Grüße

              Tom