Wer kennt das Problem als Programmierer nicht? Die User meckern, bei ewig vielen Optionen in einem Auswahlfeld – und das zurecht! Nun können die Optionen des Auswahlfelds mittels Ajax.Request und einem Suchfeld gefiltert werden, aber ein Request ist eben ein Request und ich habe mir deswegen etwas überlegt, was ohne Request auskommt. Dabei herausgekommen ist eine kleine JavaScript-Funktion, die ich gerne zur Verfügung stelle.
Aber zuerst eine kleines Beispiel, wie der HTML-Code dazu aussehen könnte:
<select name="auswahl" id="auswahl"> <option value="">--Bitte wählen --</option> <option value="1">Eins</option> <option value="2">Eins</option> <option value="3">Eins</option> <option value="4">Eins</option> <option value="5">Eins</option> <option value="1000000">Einemiooooon!!!!</option> </select> Filtern: <input type="text" size="12" value="" onkeyup="filterSelectField( 'auswahl', this.value )"/>
Die dazugehörige JavaScript-Funktion sieht dann so aus:
function filterSelectField( fieldid, s ) {
var rex = new RegExp( '^' + s.replace( '\.', '\\.' ), "i" );
$$('select#' + fieldid + ' option').each( function (ele) {
if( ele.value != '' )
{
if( ele.innerHTML.search( rex ) == -1 )
ele.hide();
else
ele.show();
}
} );
}
Die Funktionsweise ist schnell erklärt: Mittels einer RegEx wird die Bennenung des Werts der “option” durchsucht und bei einem Treffer angezeigt und bei keinem Treffer ausgeblendet. Einfacher und schneller geht’s nun wirklich nicht. :-)
Viel Spaß damit.
