jQuery autocomplete not drawing results

Question

First of all, I'm not experienced at all in JS, so I do not understand it too much. Be forewarned :-)

I am writing an autocomplete menu which is filled from a call to a webservice. This web service will return different kinds of elements (people, departments, projects, etc):

{"results": [{"url": "/en/staff/1/", "text": "Santa Klaus", "first_name": "Santa", "last_name": "Klaus", "avatar": "/static/img/generic-avatar.png"},{"url": "/en/projects/1/", "text": "Research on algae", "by": "some university"},{"url": "/en/department/1/", "text": "department A"}]}

I want to render them as in the next example:

<form id="search" action="/search/" style="opacity: 1;">
    <div class="ui-widget">
        <input type="search" name="search field q" placeholder="Søk etter personer, prosjekter, avdeling, forskningsfelt ..." class="autocomplete-me">
    </div>
    <div id="autocomplete" class="">
        <h2>People</h2>
        <ul>
            <li>
                <a href="/profiles/profilek/" title="">
                    <img src="/img/avatar-santa-klaus.jpg">
                    <h3>Santa Klaus</h3>
                    <h4>Brings presents during Christmas</h4>
                </a>
            </li>
            <li>
                <a href="/profiles/profileJ" title="">
                    <img src="/img/generic-avatar.png">
                    <h3>John Doe</h3>
                    <h4>Unknown</h4>
                </a>
            </li>
        </ul>
        <a class="see-all" href="/profiles/all/" title="">all people...</a>
        <h2>Projects</h2>
        <ul>
            <li>
                <a href="/project/pr1" title="">
                    <h3>Research on algae ...</h3>
                    <h4>Some university</h4>
                </a>
            </li>
            <li>
                <a href="/project/pr2" title="">
                    <h3>Research on something else ...</h3>
                    <h4>Other university</h4>
                </a>
            </li>
        </ul>
        <a class="see-all" href="/projects/all/" title="">All projects...</a>
        <h2>Departments</h2>
        <ul>
            <li>
                <a href="/departments/departmentA" title="">
                    <h3>Department A</h3>
                </a>
            </li>
        </ul>
    </div>
    <input type="submit" name="submit search" value=Search">
</form>

My first question, as I need to display those objects in a separate way: shall I return from my web service several collections instead of a single one? Something like this:

{"people": [{"url": "/en/staff/1/", "text": "Santa Klaus", "first_name": "Santa", "last_name": "Klaus", "avatar": "/static/img/generic-avatar.png"}],"projects": [{"url": "/en/projects/1/", "text": "Research on algae", "by": "some university"}],"departments":[{"url": "/en/department/1/", "text": "department A"}]}

On the other hand, my javascript code is not working. It does the request to the server and receives the collection, but it doesn't draw the dropdown menu.

$(function() {
    $( ".autocomplete-me" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: '/autocomplete',
                minLength: 4,
                dataType: "json",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    q: request.term
                },
                success: function(response) {
                    response(
                        $.map( response.results,
                            function(item) {
                                return {
                                    label: item.text,
                                    value: item.url
                                }
                            }
                        )
                    );
                }
            });
        }
    });
});

Results should be rendered into the "autocomplete" div, but I don't know how to render that. Can you guys help me out? Thanks.

Answer 1

Finally I "threw away" the .autocomplete() jquery ui method. I used instead the $.getJSON method + nested $.each calls, which are much more flexible. Then drawing my html code was an easy thing.

$(".autocomplete-me").bind('keyup mouseup change', function(e){
    var search_terms = $(".autocomplete-me")[0].value
    if (search_terms.length>3){
        var autocompleteUrl = '/autocomplete/';
        $.getJSON(autocompleteUrl, {
            format:'json',
            q: search_terms
        }).done(function(data){
            if (data.results.length > 0) {
                console.log(data.results);
                var suggestions = '';
                $.each(data.results, function(key, val){
                    suggestions += '<h2>' + val.category + '</h2>';
                    suggestions += '<ul>';
                    $.each(val.items, function(item_key, item_val){
                        // more stuff...
                    });
                    suggestions += '</ul>';
                    suggestions += '<a class="see-all" href="';
                    suggestions += val.url[1];
                    suggestions += '">';
                    suggestions += val.url[0];
                    suggestions += '</a>';
                });
                $('div#autocomplete').html(suggestions);
                $('div#autocomplete').show();
            }
        });
    }
});