Wiki-Quellcode von Autocomplete mit AJAX
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | In diesem Beispiel wird der WebSevice [[Geonames>>url:http://www.geonames.org/]]in ein Formular von {{formcycle case="dat"/}} mithilfe von //AJAX// angebunden. Das Ergebnis wird anschließend über die autocomplete Funktion an der Oberfläche zur Auswahl angeboten. | ||
| 2 | |||
| 3 | {{figure image="FCSnapshot32.png"}} | ||
| 4 | Einrichten der Autovervollständigung für ein Formularfeld. Die möglichen Auswahloptionen werden vom Webservice [[Geonames>>url:http://www.geonames.org||target="_blank"]] abgeholt. | ||
| 5 | {{/figure}} | ||
| 6 | |||
| 7 | Im ersten Schritt erstellen wir eine Funktion zum Aufrufen des WebService und übergeben die erforderlichen Daten (data). Weiterhin geben wir an wie das Ergebnis bei erfolgreicher Antwort (success) verarbeitet werden soll. Die Funktion $.ajax ist sehr umfangreich und verfügt über eine große Anzahl von Parametern welche im Detail unter [[http:~~/~~/api.jquery.com/jquery.ajax/>>url:http://api.jquery.com/jquery.ajax/]] beschrieben werden. | ||
| 8 | |||
| 9 | {{code language="Javascript"}} | ||
| 10 | function geonamesCity( request, response ){ | ||
| 11 | $.ajax({ | ||
| 12 | url: "http://api.geonames.org/searchJSON", | ||
| 13 | dataType: "jsonp", | ||
| 14 | data: { | ||
| 15 | q:"DE", | ||
| 16 | country:"DE", | ||
| 17 | lang:"DE", | ||
| 18 | username:"ximademo", | ||
| 19 | featureClass: "P", | ||
| 20 | style: "full", | ||
| 21 | maxRows: 12, | ||
| 22 | name_startsWith: request.term | ||
| 23 | }, | ||
| 24 | success: function( data ) { | ||
| 25 | response( $.map( data.geonames, function( item ) { | ||
| 26 | return { | ||
| 27 | label: item.name + (item.adminName1 ? ", " + item.adminName1 : ""), | ||
| 28 | value: item.name | ||
| 29 | } | ||
| 30 | })); | ||
| 31 | } | ||
| 32 | }); | ||
| 33 | } | ||
| 34 | {{/code}} | ||
| 35 | |||
| 36 | Als nächstes initialisieren wir die "Autocomplete" Funktionalität für unser Textfeld "tf1". Als Quelle (source) muss nun die Funktion aus Schritt 1 angegeben werden. Eine ausführliche Dokumentation der Funktion "autocomplete" finden Sie unter [[http:~~/~~/api.jqueryui.com/autocomplete/.>>url:http://api.jqueryui.com/autocomplete/]] | ||
| 37 | |||
| 38 | {{code language="Javascript"}} | ||
| 39 | $( "[name=tf1]" ).autocomplete({ | ||
| 40 | source: geonamesCity | ||
| 41 | }); | ||
| 42 | {{/code}} | ||
| 43 | |||
| 44 | Mit dem beigefügtem Formular können Sie dieses Beispiel ausprobieren [[autocomplete_geonames.json>>attach:autocomplete_geonames.json]] |