jQuery自动完成未绘制结果

首先，我对JS一点经验都没有，所以我不太了解它。预先警告：-）

我正在写一个自动完成菜单，它是从一个呼叫到一个网络服务来填充的。此web服务将返回不同类型的元素（人员、部门、项目等）：

{"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"}]}

我想把它们呈现为下一个例子：

<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>

我的第一个问题是，由于我需要以单独的方式显示这些对象：我应该从web服务返回几个集合而不是一个集合吗？类似这样的东西：

{"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"}]}

另一方面，我的javascript代码不起作用。它向服务器发出请求并接收集合，但不绘制下拉菜单。

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

结果应该呈现到"autocomplete"div中，但我不知道如何呈现。你们能帮我吗？谢谢