TIM Wiki / NEW TIM 6 Documentation

Eine Autocomplete Funktion ist eine Funktion, die bei Eingabe in ein Textfeld Vorschläge gibt welche dann ausgewählt werden können. Ein Beispiel wäre ein Feld für die Auswahl eines Mitarbeiters.

Für den ersten Schritt muss die Javascript Bibliothek jQuery eingebunden werden. Diese beinhaltet bereits einfach Möglichkeiten zur Einbindung von Autocomplete Funktionen. Die Einbindung muss in der initMethod der Smartform geschehen, damit jQuery zu jederzeit verfügbar ist. Die Einbindung erfolgt über die folgenden Zeile:

jq = (this.form.ownerDocument.defaultView!=null) ? this.form.ownerDocument.defaultView.jQuery : this.form.ownerDocument.parentWindow.jQuery;

Der „$“ Operator ist nun über den „jq“ Operator verfügbar und ist nötig um jQuery Funktionaliäten benutzen zu können.

Jeder beliebige Textfeld kann nun ausgewählt werden um einen Autocomplete zu beinhalten. Hierfür muss das Feld über einen sogenannten Selektor gefunden werden. Ein Feld kann mit Hilfe seiner ID über die folgenden Zeile gefunden werden:

jq('#ID_DES_FELDES');

Für die erste Ausbaustufe des Autocomplete bildet ein einfachs Beispiel. Hierbei wird dem Feld ein Autocomplete aufgesetzt, welchem ein sogenannter Array (stellt eine Liste von Werten dar) als Quelle dient.

jq( "#ID_DES_FELDES" ).autocomplete({
        source: [ "Vorschlag 1", "Vorschlag 2", "Vorschlag 3", "Vorschlag 4", "Vorschlag 5", "etc..." ]
});

Im nächsten Schritt muss diese Funktion nun erweitert werden, sodass die Auswahl die getroffen wird auch gespeichert wird. Hierfür muss der Code folgendermaßen angepasst werden. Es muss eine 'success' Funktion hinzugefügt werden welche bei Auswahl einer Vorschlagsmöglichkeit aufgerufen wird. In dieser Methode wird nun der so genannten 'entity' der Name und der Wert des Inputfeldes gegeben. Nun ist es T!M möglich diese Prozessvariable abzuspeichern.

jq = (this.form.ownerDocument.defaultView!=null) ? this.form.ownerDocument.defaultView.jQuery : this.form.ownerDocument.parentWindow.jQuery;
jq( "#auto" ).autocomplete({
     source: [ "Example 1", "Example 2", "Example 3", "Example 4", "Example 5"],
     success:function(ui){
	   window['entity'].setValue(this.id, ui.item.value);
     }
});