jquery: autocomplete with remote xml source

Question

Hi,

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

Answer 1

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, bud 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