Jquery ui autocomplete - multiple sources

Question

Hi.

For 1 source this is the correct code after the ajax call: url: "links2.xml",

I would like the source to be multiple xml files. How do I include the extra paths?

Thanks.

Answer 1

Is it even possible to do this fom jquery side? Might be you have to load and join the files "by hand".

Answer 2

First of all, the docs say that "the Autocomplete plugin expects that string to point to a URL resource that will return JSON data." Note: JSON, not XML so you need to convert your xml to json in the following.

The xml to json can be done on your server or on the client browsers. It will be faster to do it once on your server, if possible.

To use multiple source files, you will need to first load the multiple files in your HTML/JS page. Then concatenate them together into a Javascript array, then provide the array to the autocomplete call.

Something like:

<script>
  myproject_choices = []; // global var. Hence prefix with project name.

  var cb = function(data){jQuery.merge(myproject_choices, data);}; // callback for ajax

  $.getJSON('ajax/choices1.json', cb); // fetch and concatenate the choices
  $.getJSON('ajax/choices2.json', cb);
  $.getJSON('ajax/choices3.json', cb);
</script>

# later...
$( ".selector" ).autocomplete({source: myproject_choices });

Answer 3

I might be possible by writing a custom source function:

$("#elm").autocomplete({ source: function(request, response) {
$.ajax({
   url: "links1.xml",
   success: function(data)
   {
           // store data here
           $.ajax({
               url: "links2.xml",
               success: function(data)
               {  
                  // combine data from first call with this call
                  response(combineddata);
               }
           }
   });
}....

but i've you're able to combine the files at some other point that might be preferable.

Xml with autocomplete: http://jqueryui.com/demos/autocomplete/#xml