jquery: autocomplete mit remote-xml-Quelle

Ich versuche zu realisieren eine autocomplete textbox, deren Werte erzeugt werden, indem ein remote-Skript die Rückgabe von XML-Inhalten. Ich verwende JQuery-1.4.3 und das autocomplete-widget von JQuery-UI-1.8.5.

Ich untersucht habe, die autocomplete demo-Seite für die XML-Daten geparst einmal Beispiel, und bin zu versuchen, die Kommentare:

Sollte dies auch als Referenz dienen, auf, wie zu analysieren, eine remote XML-datasource - die Analyse würde nur geschehen, für jede Anforderung in der Quelle-callback.

Als test, ich bin versucht, dies funktioniert mit dem mitgelieferten XML-demo. Obigen Kommentar darauf hin, dass die AutoVervollständigen - 'source' - Eigenschaft muss ersetzt werden mit der Ajax-Aufruf. Doch, wenn ich ändern Sie diese in der Funktion geliefert an die demo-Seite, ich bin nicht immer alle Ergebnisse mit folgenden autocomplete-Funktion:

$( "#birds" ).autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) {
        var data = $( "geoname", xmlResponse ).map(function() {
//alert($('name', this).text());
          return {
            value: $( "name", this ).text() + ", " +
                   ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text()
          };
        }).get();
      }
    })
  },
  minLength: 0,
  select: function( event, ui ) {
    log( ui.item ?
         "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
         "Nothing selected, input was " + this.value );
  }
});

Immer noch, das auskommentieren der einfache debug-popup-Meldung zeigt an, dass der Ajax-Aufruf gelingt, abrufen der Werte, die in der Konstruktion der Daten. Wo ist mein Fehler???

Jede Hilfe viel geschätzt!

Freundlichen GRÜßEN,

Ron Van den Branden

InformationsquelleAutor rvdb | 2010-10-27

Ok,

Habe ich die Lösung gefunden, und können gerne beantworten Sie mich.

In meinem ersten Versuch, als ich erklärte, dass die variable "data" in der Erfolgs-callback für die Ajax-Funktion, aber hat nicht nichts mit ihm. Die Lösung ist einfach genug: hinzufügen einer Antwort () - Funktion, werden die Daten zurück, die variable, wenn der ajax-Aufruf erfolgreich ist. Ich werde die komplette korrigierte Funktion (obwohl die einzige änderung ist in Zeile 14):
Kopieren Sie den code

$( "#birds" ).autocomplete({
   source: function(request, response) {
     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         var data = $( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         });
       response(data);
       }
     })
   },
   minLength: 0,
   select: function( event, ui ) {
     log( ui.item ?
       "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
       "Nothing selected, input was " + this.value );
   }
 });

Natürlich, in diesem Fall die Reaktion kann direkt erstellt werden, ohne zuerst die Deklaration eines Daten-variable:
Kopieren Sie den code

     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         response($( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         }));
       }
     })
   }

(Hinweis: diese Funktion snippets funktionieren, wenn eingesteckt in die 'remote-XML' autocomplete demo)