jquery: autocomplete with remote xml source

I am trying to implement an autocomplete textbox whose values are generated by a remote script returning XML contents. I'm using JQuery-1.4.3 and the autocomplete widget from JQuery-UI-1.8.5.

I've studied the autocomplete demo page for the XML data parsed once example, and am trying to implement the comments:

This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.

As a test, I'm trying to get this working with the supplied XML demo. Above comment suggests that the autocomplete 'source' property has to be replaced with the Ajax call. Yet, when I modify this in the function supplied at the demo page, I'm not getting any results with following autocomplete function:

$( "#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 );
  }
});

Still, commenting out the simple debug popup message shows that the Ajax call does manage to retrieve the values used in constructing the开发者_如何转开发 data. Where's my mistake?

Any help much appreciated!

Kind regards,

Ron Van den Branden

Ok,

I've found the solution, and can gladly answer myself.

In my original attempt, I declared the variable 'data' in the success callback for the Ajax function, but didn't do anything with it. The solution is simple enough: add a response() function that will return the data variable if the ajax call is successful. I'll add the complete corrected function (though the sole change is on line 14): Copy 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 );
   }
 });

Of course, in this case the response can be constructed directly, without first declaring a data variable: Copy 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()
           };
         }));
       }
     })
   }

(note: these function snippets work when inserted in the 'remote XML' autocomplete demo)

Phew! Now on to doing something useful with this.

Ron