jquery - 自动完成请求/服务器响应是什么样的？

Question

这似乎是一个黑洞:搜索了一个小时后 jQuery UI网站、堆栈溢出和谷歌搜索，我还没有找到关于如何编写自动完成的服务器端的最基本信息。

传递给服务器的参数是什么，JSON 响应应该是什么样子？

我一定是遗漏了一些东西，因为其他人是如何学习如何做到这一点的？网站似乎只讨论客户端 JavaScript 代码，从不讨论协议(protocol)或服务器端示例。

我需要足够的东西才能让最简单的远程示例正常工作。

Answer 1

What parameter is passed to the server

您需要将 request.term 传递给您的服务器端代码(来自文档):

A request object, with a single property called "term", which refers to the value currently in the text input.

基本上，在您的 autocomplete 代码中，您将拥有如下内容:

$("#autocomplete").autocomplete({
    // request.term needs to be passed up to the server.
    source: function(request, response) { ... }
});

and what should the JSON response look like?

autocomplete 小部件需要一个带有 label 和 value 属性的 JSON 对象数组(尽管如果您只指定 value，它将用作标签)。因此，在最简单的情况下，您可以返回如下所示的数据:

[
    { label: 'C++', value: 'C++' }, 
    { label: 'Java', value: 'Java' }
    { label: 'COBOL', value: 'COBOL' }
]

如果你需要更复杂的东西，你可以使用 $.ajax 函数的 success 参数来规范化你在自动完成获取之前返回的数据:

source: function( request, response ) {
    $.ajax({
        /* Snip */
        success: function(data) {
            response($.map( data.geonames, function( item ) {
                return {
                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                    value: item.name
                }
            }));
         }
    });

此代码取自示例 here (这是 ajax + 自动完成在更复杂场景中工作的一个很好的例子)。

基本上，在成功的 ajax 请求后，接收到的数据被规范化(使用 $.map)为自动完成小部件所期望的。

希望对您有所帮助。