Jquery Ui Autocomplete - Multiple Sources

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.

Solution 1:

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 });

Solution 2:

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

Solution 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 callresponse(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

Solution 4:

I would separate the task into

1. The retrieval of data
2. Populating the autocomplete

If you're able to load data from multiple sources and uniform them, you can use the result to populate the autocomplete-control. I suggest you look into loading data async using jQuery Deferred-objects (api.jquery.com/jQuery.Deferred) and wait for all calls to return and use the result using $.when(...).then(...)

Example below originates from the well-written and quite well explained site: http://www.danieldemmel.me/blog/2013/03/22/an-introduction-to-jquery-deferred-slash-promise/

function getReady() {
  var deferredReady = $.Deferred();
  $(document).ready(function() {
    deferredReady.resolve();
  });
  return deferredReady.promise();
}

var firstRequest = $.ajax({ url: 'http://www.html5rocks.com/en/tutorials/file/xhr2/' });
var secondRequest = $.ajax({ url: 'http://www.html5rocks.com/en/tutorials/audio/scheduling/' });

$.when( getReady(), firstRequest, secondRequest
).done( function( readyResponse, firstResponse, secondResponse ) {
  var insertDiv1 = $('<div></div>');
  insertDiv1.html($(firstResponse[0]).find('section').html());
  var insertDiv2 = $('<div></div>');
  insertDiv2.html($(secondResponse[0]).find('section').html());
  $('body').append(insertDiv1, '<hr/>', insertDiv2);
});