jQuery自动完成不绘制结果

Question

首先，我完全没有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>

我的第一个问题是，我需要以单独的方式显示这些对象：是否应该从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
                                }
                            }
                        )
                    );
                }
            });
        }
    });
});

结果应呈现到“自动完成” div中，但我不知道如何呈现。 你们能帮我吗？ 谢谢。

Answer 1

最后，我“扔掉了” .autocomplete（）jquery ui方法。 我改用$ .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();
            }
        });
    }
});