jQuery UI 自动完成：不显示下拉菜单

Question

我一直在努力让 jQuery UI 自动完成功能使用远程源工作。我得到了每个请求的正确结果（使用 Chromes Inspector），但由于某种原因没有显示下拉框。这是搜索字段：

<form action={'/content/search'|ezurl} class="search-form">
    <fieldset>
        <input type="text" id="Search" name="Search" class="text" />
        <input type="submit" name="SearchButton" class="submit" value="search" />
    </fieldset>
</form>

还有 javascript：

$(function() {

$("#Search").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/content/search",
                dataType: "get",
                data: {
                    maxRows: 12,
                    query: request.term,
                    filter: 'author'
                }
            });
        },
        type:"json",
        select: function(event, ui) 
        {
            window.location =  ui.item.url;
        }
   });
});

返回：

[{"html":"<li><a href=\/Author\/Per_Asmund\/(language)\/nor-NO>Asmund, Per<\/a><\/li>","url":"\/Forfattere\/Per_Asmund\/(language)\/nor-NO","id":"210"},
{"html":"<li><a href=\/Forfattere\/Per_AErlend\/(language)\/nor-NO>Erlend, Per<\/a><\/li>","url":"\/Forfattere\/Per_AErlend\/(language)\/nor-NO","id":"238"}]

我可能只是错过了一些东西，但我终其一生都无法弄清楚。非常感谢任何帮助！

Answer 1

您错过了 source 参数中的 response 调用

      $.ajax({
            url: "/content/search",
            dataType: "JSON", // edit: fixed ;)
            data: {
                maxRows: 12,
                query: request.term,
                filter: 'author'
            },
            success: function(data) { response(data); } // add this line
        });

但在这种情况下，也许一些more simple usage 应该更好。