Question

Up until now I have used the django template system to perform this kind of action. Simply respond to the ajax request with an html template.

Right now I am trying to implement an autocomplete search feature and I want to send back to the client the response in json format.

All good and set up to this point. This is my jQuery part:

$(document).ready(function(){
    $("#id_q").keyup(function(){ //the form text input
        autocomplete(this.value);
    });

    function autocomplete(inputString) {
        if(inputString.length == 0) {
            $('#autocomplete').fadeOut();
        }
        else {
            $.get("/autocomplete/", {q: ""+inputString+""}, function(data) {
                $('#autocomplete').fadeIn();
                $('#autocomplete').html(data);
            });
        }
    }
});

When using a django template as a response, the #autocomplete div was showing up nice and as expected with .html(data), thats because I was setting up the html in the template beforehand, as I wanted it to be shown.

How do I process the data sent from the server (in json format)?
Data looks something like this:

[{'title':'titleString', 'descr':'desriptionString', 'url':'itemAbsoluteUrl'}, ..]

In order to obtain my #autocomplete html, say, something like:

<li><a href="data.url">data.title<br>data.descr</li>

Thanks for any feedback!

Answer 1

Try

var li = $('<li><a href="'+data.url+'">'+data.title+'<br/>'+data.descr+'</a></li>')

and then you can insert li where you want, or

$('#autocomplete').html('<li><a href="'+data.url+'">'+data.title+'<br/>'+data.descr+'</a></li>');

To iterate through the results

$.each(results, function(index, value){
...
})