Mehrspaltige Dropdown-Listen erstellen
Die in Webbrowsern standardmäßig vorhandenen Listenelemente (Dropdown) ermöglichen die Auswahl über ein Kriterium. In einigen Fällen reicht dies jedoch nicht aus, um die Auswahl eindeutig zu treffen. Doch mehrspaltige Auswahllisten sind nicht Bestandteil des Webstandards. Intrexx bietet mit dem sogenannten Datapicker eine Alternative, mit der eine mehrspaltige Auswahl realisiert werden kann.
Zunächst wird ein Eingabefeld benötigt, welches die Auswahl des Datapickers speichert und das gleichermaßen als Suchfeld dient. Das Feld selbst wird allerdings auf „schreibgeschützt“ gestellt, um eine manuelle Veränderung des Inhaltes zu vermeiden. Rechts neben dem Eingabefeld wird eine
Schaltfläche vom Typ Grafik platziert, welche mit der Grafik der Auswahlliste (Schaltfläche mit Pfeilsymbol) versehen wird.
Im nächsten Schritt wird der Datapicker in der Schaltfläche auf das Suchfeld konfiguriert.
Welche Spalten in der Datapicker-Auswahl angezeigt werden sollen, wird über die Eigenschaften (Schaltfläche hinter der Optionsangabe des Suchfeldes) vorgegeben. Mit der Version 4.5 kann die Anzahl der Datensätze pro Seite, also die Länge des Suchergebnis-Tooltipps, vorgegeben werden.
Wenn das Suchergebnis mehr Datensätze enthält, kann durch Aktivierung des Navigationselementes geblättert werden. Die Option zum automatischen Anzeigen der Ergebnisse ab einer vorgegebenen Eingabelänge ist zu deaktivieren.
Nachteil des Datapickers ist zunächst, dass das zugrundeliegende Suchfeld leer sein muss, damit der Datapicker die Auswahlliste anzeigt. D.h. beim Auslösen des Datapickers muss zunächst das Eingabefeld gelöscht werden. Im onclick-Ereignis der Schaltfläche wird hierzu die Funktion deleteForNewPick() hinzugefügt. Der Aufruf muss zwingend vor den Eintrag „DataPicker“ gesetzt werden. Der Eintrag kann mit Hilfe der Pfeilsymbole verschoben werden.
function deleteForNewPick()
{
var oEntry = getElement("GUID des Suchfeldes");
oEntry.value = "";
return true;
}
Die Auswahllisten klappen auch beim Anklicken des Anzeigebereiches – in diesem Fall des Suchfeldes – auf. Um auch diese Verhaltensweise zu gewährleisten, wird im onclick-Ereignis des Suchfeldes die Funktion pickOnClick() ausgelöst, welche einfach ein Anklicken der Schaltfläche mit dem Datapicker simuliert.
function pickOnClick()
{
var oButton = getElement("GUID des Suchfeldes");
oButton.onclick();
return true;
}
Der Datapicker hat noch eine Eigenschaft, die in diesem Szenario störend wirkt. Nach dem Einfügen eines Suchergebnisses wird dies mit einer Meldung quittiert. Um diese Meldung zu unterdrücken, kann im Expert-Reiter der Datapicker-Schaltfläche das Expert-Attribut showadvise mit dem Wert Nein (false) gesetzt werden.
So erhalten Sie ein Feld, das wie eine reguläre Dropdown-Liste aussieht und sich auch so verhält. Dank des Datapickers enthält es jedoch mehrere Spalten zur Darstellung der Informationen. Klickt man in das Eingabefeld oder den Pfeilschalter, wird die Liste geöffnet. 
