Select multiple Filtern

[awol]

Hallo,

ich habe folgende Situation.
Ich habe ein Select mit der Eigenschaft multiple.
Darüber habe ich ein Text input Field angebracht.

Nun würde ich gerne die Einträge in dem Select anfangen zu Filtern sobald in das input etwas eingegeben wird.
Und zwar so das nurnoch die Angezeigt werden in dennen der eingegebene Begriff vorkommt.

Ich hoffe ich habe den Thread im richtigen Bereich erstellt :)

Danke & Gruß
awol

 

[threadi]

Nein, ist nicht der richtige Bereich. Das was Du willst, lässt sich nur mit JavaScript lösen. Hab ihn daher in den richtigen Bereich verschoben.

Und zwar müsstest Du an das input-Feld einen EventHandler wie onchange hängen der eine JavaScript-Funktion aufruft, welche wiederum die Filterung vornimmt. Im HTML sieht das z.B. so aus:

<input type="text" name="eingabefeld" value="" onchange="setFilter(this);">

Die in meinem Beispiel genannte Funktion setFilter müsste dann sowohl den eingegebenen Wert prüfen als auch die Filterung in dem select-Feld vornehmen. Letzteres ist dann jedoch etwas komplexer. Der Grundaufbau der Funktion könnte z.B. so aussehen und müsste z.B. in eine externe JS-Datei eingefügt werden, die in das HTML-Dokument eingebaut wird.

function setFilter( obj ) {
 if( obj && obj.value && obj.value.length > 0 )[
   // Hier dann die Filterung einbauen
 }
}

Theoretisch könnte man einfach alle nicht übereinstimmenden <option>-Element mit "display: none;" unsichtbar machen, das kapiert jedoch dummerweise der Internet Explorer nicht. Aus dem Grund könnte und sollte man hier folgendermaßen vorgehen:
Alle Einträge des select-Feldes in einem Array speichern.
Vor der Prüfung auf das Filterkriterium das select-Feld im DOM erzeugen, z.B. so:

var selectfeld = document.createElement("select");
selectfeld.name = "derFeldName";
selectfeld.multiple = "multiple";
selectfeld.size = "5";

Dann erst durch das Array (ich nenn es einfach mal "liste") gehen und wenn der Array-Eintrag als <option>-Feld eingefügt werden soll, dann dieses <option>-Elemnt im DOM erzeugen, z.B. so:

var optionfeld = document.createElement("option");
optionfeld.value = liste[i];
optionfeld.innerHTML = liste[i];
selectfeld.appendChild(optionfeld);

Zum Schluss dann das Original-Select-Feld entfernen (Stichwort removeChild()) und das neue Feld an dessen Stelle einfügen.

Ich weiß, klingt komplex, ist es auch - aber einfacher machen es die Browser einem leider nicht :(