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

[FP]

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");
...