Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
en:software:tim:smartform:autocomplete
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:software:tim:smartform:autocomplete [2018/04/18 09:14] Julian Le created |
en:software:tim:smartform:autocomplete [2021/07/01 09:52] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | FIXME **This page is not fully translated, yet. Please help completing the translation.** \\ | + | ==== Autocomplete function in the smartform ==== |
| - | //(remove this paragraph once the translation is finished)// | + | |
| - | ==== Autocomplete Funktion in der Smartform ==== | + | |
| - | 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. | + | A autocomplete function is a function, that, when inputting into a textfield, makes suggestions, which then can be selected. An example would be a field for selecting a employee. |
| === jQuery === | === jQuery === | ||
| - | 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: | + | For the first step the JavaScript library jQuery has to be integrated. This already contains possibilities for integrating autocomplete functions. The integration has to happen in the initMethod of the smartform, so that jQuery is available at all times. The integration occurs via the following line: |
| <code javascript> | <code javascript> | ||
| Line 13: | Line 11: | ||
| </code> | </code> | ||
| - | Der "$" Operator ist nun über den "jq" Operator verfügbar und ist nötig um jQuery Funktionaliäten benutzen zu können. | + | The "$" operator is now available as the "jq" operator and is needed to use jQuery functionalties. |
| === Autocomplete === | === Autocomplete === | ||
| - | 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: | + | Any textfield can now be selected to include a autocomplete. THerefor the field has to be found via a selector. A field can be found by its ID via the following line: |
| <code javascript> | <code javascript> | ||
| - | jq('#ID_DES_FELDES'); | + | jq('#ID_OF_FIELD'); |
| </code> | </code> | ||
| - | Die erste Ausbaustufe des Autocomplete wird an Hand eines einfachen Beispiels erötert. Hierbei wird dem Feld ein Autocomplete aufgesetzt, welchem ein sogenannter Array (stellt eine Liste von Werten dar) als Quelle dient. | + | The first extension stage will be shown with a simple example. Here the autocomplete is put on the field, whereby an array (describes a list of values) is used as a source. |
| <code javascript> | <code javascript> | ||
| - | jq( "#ID_DES_FELDES" ).autocomplete({ | + | jq( "#ID_OF_FIELD" ).autocomplete({ |
| source: [ "Example 1", "Example 2", "Example 3", "Example 4", "Example 5"] | source: [ "Example 1", "Example 2", "Example 3", "Example 4", "Example 5"] | ||
| }); | }); | ||
| Line 33: | Line 31: | ||
| {{ :software:tim:smartform_basics:autocomplete_first_example.png?1200 }} | {{ :software:tim:smartform_basics:autocomplete_first_example.png?1200 }} | ||
| - | 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 'change' 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. In der change Methode ist es ebenfalls möglich eine Validierung einzubauen die überprüft ob eine Auswahl getroffen wurde. | + | In the next step the function has to be extended, so that the selected option is saved as well. Therefor the code has to be adjusted as follows. A 'change' function has to be added, which is called when selection an option. In this method the nam and value is passed on to the so-called 'entity'. Now it is possible for TIM to save the processvariable. It is also possible to include a valdiate function in the change method, that checks, if a selection was made. |
| <code javascript> | <code javascript> | ||
| Line 49: | Line 47: | ||
| </code> | </code> | ||
| - | Für das Autocomplete können nun noch zusätzliche Parameter eingestellt werden. Um das Beispiel weiter auszubauen, fügen wir hinzu dass erst ab einer Länge von 3 Zeichen der Eingabe die Vorschläge angezeigt werden. Dies hat vor allem bei großen Datensätzen den Vorteil dass die Auswahlliste nicht übermäßig lang wird. Um diese zu realisieren fügen wir die Einstellung "minLength" hinzu. Weiter Parameter können in der [[http://api.jqueryui.com/autocomplete/|API]] von jQuery eingesehen werden. | + | Additional parameter can be set for the autocomplete. To expand the exmaple, we add that suggestions will only be shown after inputting 3 characters. This has the advantage that when using a large data set the suggestion list is not too long. To implement this we add the setting "minLength". Additional paramters can be seen in the [[http://api.jqueryui.com/autocomplete/|API]] of jQuery |
| <code javascript> | <code javascript> | ||
| Line 66: | Line 64: | ||
| </code> | </code> | ||
| - | === Autocomplete mit CSV Datei als Quelle === | + | === Autocomplete with CSV file as source === |
| - | Die Vorschläge für das Autocomplete können natürlich auch komplexer sein und mehrere Informationen enthalten. Hierfür muss dem Autocomplete zum Beispiel ein Textfile übergeben. Für dieses Beispiel benutzen wir eine Beispieldatei mit Personaldaten. Diese enthält Vornamen, Nachnamen, Email und Telefonnummer in den einzelnen Spalte der CSV. Die Datei liegt in dem Beispiel im Custom Ordner. Zuerst muss diese Datei geholt werden und ein Objekt aus dessen Inhalten erzeugt werden. Dies geschieht per AJAX Request. Der Inhalt der Datei wird zuerst an jedem Zeilenumbruch geteilt und anschließend an jedem Semikolon. Es wird nun also ein Objekt employee" mit den Daten aus der Textdatei generiert. Das Objekt employee wird nun als Source dem Autocomplete übergeben. Im Falle einer Auswahl, wird Vorname, Nachname, Email und Telefonnummer in einem Popup ausgegeben. Kann das Textfile nicht geladen werden wird eine Fehlermeldung ausgegeben. | + | The suggestions for the autocomplete can of course be more complexe and include more information. Therefor the autocomplete has to be passed a text file. For this example we are using a example file with personnel data. It contains first name, last name, email and phonenumber in the columns of the CSV. The file is located in this exmaple in the custom folder. Firstly the file has to be called and a object has to be created from the content. This happens via AJAX request. The file's content will be split on ever linebreak and then on ever semicolon. Now an object "employee" with data from the text file is generated. The object is then passed on to the autocomplete as a source. If an option is selected, first name, last name, email and phonenumber are displayed in a popup. If the text file cannot be loaded, an error message is shown. |
| <code javascript> | <code javascript> | ||
| Line 88: | Line 86: | ||
| }; | }; | ||
| } | } | ||
| - | jq( "#ID_DES_INPUTFELDES" ).autocomplete({ | + | jq( "#ID_OF_FIELD" ).autocomplete({ |
| source: employees, | source: employees, | ||
| minLength: 0, | minLength: 0, | ||
en/software/tim/smartform/autocomplete.1524035684.txt.gz · Last modified: 2021/07/01 09:54 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: 2013 T!M Solutions GmbH
