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.
4 Answers
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 });
Comments
Is it even possible to do this fom jquery side? Might be you have to load and join the files "by hand".
2 Comments
specked
I am already doing it with 1 xml file why wouldn't I be able to make a second request? I know I can just request all the documents and then parse them together then pass that to jquery but the extra step seams like a waste of time. I'd rather just make 2 separate source requests.
joni
Might be jQuery has the functionality implemented to use 2 files as source, or might be not. As far as I know, it doesn't have this functionality, so you have to do it by yourself. Another approach would be on the server side, can't you just join the files there?
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
6 Comments
Milo
@Larry K: xml can be parsed to an array of objects which can be used for "respone()" Each object shoud have an id, value, label and both attribute.
Milo
@Larry K: You're solution will work but might not be a working solution if the sources aren't static.
Larry K
The OP was using a static source via a url.
Milo
@Larry K: indeed, so if he has the option to convert it to json on the server your solution would be preferable and definitly faster.
specked
I have no server-side abilities. Everything is being driven client side via javascript
|
I would separate the task into
- The retrieval of data
- 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);
});
