Benutzer-Werkzeuge

Webseiten-Werkzeuge


Plugin installed incorrectly. Rename plugin directory 'swiftmail.backup' to 'swiftmail'.
software:tim:smartform:autocomplete

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
software:tim:smartform:autocomplete [2014/05/19 13:16]
manuel.kindler
software:tim:smartform:autocomplete [2021/07/01 09:52] (aktuell)
Zeile 3: Zeile 3:
 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. 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.
  
-==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: 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:
  
Zeile 9: Zeile 9:
  
 Der "​$"​ Operator ist nun über den "​jq"​ Operator verfügbar und ist nötig um jQuery Funktionaliäten benutzen zu können. Der "​$"​ Operator ist nun über den "​jq"​ Operator verfügbar und ist nötig um jQuery Funktionaliäten benutzen zu können.
-==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: 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:
  
 <code javascript>​jq('#​ID_DES_FELDES'​);</​code>​ <code javascript>​jq('#​ID_DES_FELDES'​);</​code>​
  
-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.+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.
 <code javascript>​jq( "#​ID_DES_FELDES"​ ).autocomplete({ <code javascript>​jq( "#​ID_DES_FELDES"​ ).autocomplete({
-        source: [ "Vorschlag ​1", "Vorschlag ​2", "Vorschlag ​3", "Vorschlag ​4", "Vorschlag ​5", "​etc..." ]+        source: [ "Example ​1", "Example ​2", "Example ​3", "Example ​4", "Example ​5"]
 }); });
 </​code>​ </​code>​
Zeile 31: Zeile 31:
      ​change:​function(ui){      ​change:​function(ui){
                ​if(ui.item == null){                ​if(ui.item == null){
-                  alert("​Bitte wählen Sie einen Eintrag aus der Vorschlagsliste!");+                  alert("​Please choose an entry from the list!");
                } else {                } else {
            window['​entity'​].setValue(this.id,​ ui.item.value);​            window['​entity'​].setValue(this.id,​ ui.item.value);​
Zeile 46: Zeile 46:
       minLength:​3,​       minLength:​3,​
       change:​function(ui){       change:​function(ui){
- window['​entity'​].setValue(this.id,​ ui.item.value);​+ if(ui.item == null){ 
 +                  alert("​Please choose an entry from the list!"​);​ 
 +               } else { 
 +           ​window['​entity'​].setValue(this.id,​ ui.item.value);​ 
 +               }
       }       }
 }); });
 </​code>​ </​code>​
 +
 +===Autocomplete mit CSV Datei als Quelle===
 +
 +
 +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.
 +
 +
 +
  
 <code javascript>​ <code javascript>​
Zeile 55: Zeile 68:
 jq.ajax({ jq.ajax({
         type: "​post",​         type: "​post",​
-        url: "/​loom-portal/​custom/​denso/​personaldaten.txt",​+        url: "/​loom-portal/​custom/​tim/​personaldaten.txt",​
         dataType: "​html",​         dataType: "​html",​
         success: function(data){         success: function(data){
Zeile 77: Zeile 90:
                     window['​entity'​].setValue(this.id,​ui.item.value);​                     window['​entity'​].setValue(this.id,​ui.item.value);​
                     window['​entity'​].mergeLocal(true);​                     window['​entity'​].mergeLocal(true);​
-                    alert("​Suche:​ " + ui.item.value + "\nVorname: " + ui.item.firstname +"\nNachname: " + ui.item.lastname + "​\nEmail:​ " + ui.item.email + "\nTelefon: " + ui.item.phone);​+                    alert("​Suche:​ " + ui.item.value + "\nFirstname: " + ui.item.firstname +"\nLastname: " + ui.item.lastname + "​\nEmail:​ " + ui.item.email + "\nPhone: " + ui.item.phone);​
                 },                 },
                 change: function(event,​ ui){                 change: function(event,​ ui){
                     if(ui.item == null){                     if(ui.item == null){
-                        alert("​Bitte wählen Sie einen Eintrag aus der Vorschlagsliste!");+                        alert("​Please choose an entry from the list!");
                         this.value="";​                         this.value="";​
                     }                     }
Zeile 88: Zeile 101:
         },         },
         error: function(){         error: function(){
-            alert('​Daten konnten nicht geladen werden.');+            alert('​Could not load data');
         }         }
     });     });
  
 </​code>​ </​code>​
software/tim/smartform/autocomplete.1400498161.txt.gz · Zuletzt geändert: 2021/07/01 09:56 (Externe Bearbeitung)