haystack autocomplete jquery ui not being able to make it works

Question

I'm trying to pass data generated as a list by my custom view:

def autocomplete(request):
sqs = SearchQuerySet().autocomplete(content_auto=request.GET.get('q', ''))[$
suggestions = [result.name_esp for result in sqs]
return HttpResponse(suggestions)

But I don't know how to define "suggestions" in the script area to be the source for the jquery ui. I can only find examples where jquery ui is using an already defined list, like here

Answer 1

The jQuery page you link to has several examples of using an Ajax request as the source: click "Remote datasource" on the right-hand side and then "view source" at the bottom to see the code. It looks like all you need to do is add a source element to your autocomplete function, whose value is the URL that returns your data.

As well as that, though, you'll need to be sure that the data is in the right format: that means serializing it to JSON:

return HttpResponse(json.dumps(suggestions))

Answer 2

You need to make a request for you back-end, like this:

$(function() {
    var availableTags = [];

    $.get( "YOUR BACK-END HERE", function( data ) {
        availableTags  = data;
    });

    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

I didn't tested this.