Javascript jQuery自动完成不绘制结果

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

我正在写一个自动完成菜单，它是通过调用Web服务来填充的。此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>

另一方面，我的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中，但我不知道如何渲染它。你们能帮帮我吗？谢谢。

最后我放弃了.autocompletejqueryui方法。我改为使用$.getJSON方法+嵌套$.each调用，这更灵活。然后画我的html代码是一件容易的事情

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

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