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

Question

这似乎是一个黑洞:经过一个小时的搜索jQuery UI网站,Stack Overflow和谷歌搜索,我还没有找到如何编写AutoComplete 服务器端的最基本信息.

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

我一定错过了什么,因为其他人怎么学会这样做？站点似乎只讨论客户端JavaScript代码,而不是协议或服务器端示例.

我需要足够让最简单的远程示例工作.

Answer 1

什么参数传递给服务器

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

一个请求对象,具有一个名为"term"的属性,它引用当前文本输入中的值.

基本上,在你的autocomplete代码中,你会有这样的东西:

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

JSON响应应该是什么样的？

该autocomplete控件需要JSON数组使用对象label和value属性(但如果你只是指定value,它将被用作标签).所以在最简单的情况下,您只需返回如下所示的数据:

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

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

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

此代码取自此处的示例(这是一个很好的示例,总体上ajax +自动完成在更复杂的情况下工作).

基本上,当成功的ajax请求时,接收到的数据正在被标准化(使用$.map)到自动完成小部件期望的内容.

希望有所帮助.

Answer 2

除了Andrew Whitaker的完美答案之外,$ .map的另一种方法是覆盖渲染器,其示例在jQuery UI Demo页面上显示.

我使用像这样的JSON调用使用了这个功能:

JSON响应

{
   "Records": [
       {
           "WI_ID": "1",
           "Project": "ExampleProject",
           "Work_Item": "ExampleWorkItem",
           "Purchase_Order": "",
           "Price": "",
           "Comments": "",
           "Quoted_Hours": "",
           "Estimated_Hours": "",
           "Achieved": "False",
           "Used_Hours": "0"
       }
   ]
}

jQuery的

$("#WorkItem").autocomplete({
      source: function(request, response){
           $.ajax({
               type: "POST",
               url: "ASPWebServiceURL.asmx/WorkItems",
               data: "{'Project_ID':'1'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (msg) {
                   response($.parseJSON(msg.d).Records);
               },
               error: function (msg) {
                   alert(msg.status + ' ' + msg.statusText);
               }
           })
       },

       select: function (event, ui) {
           $("#WorkItem").val(ui.item.Work_Item);
           return false;
       }
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + item.Work_Item + "</a>")
    .appendTo(ul);
};

在此示例中,将覆盖_renderItem函数,以便使用从JSON响应中检索的记录的属性填充搜索结果列表(即,显示在文本框下的列表).

虽然不那么简单,但它允许您提取一些非常有趣的东西(例如,使用来自JSON响应的多位数据)

Answer 3

到目前为止,这两个答案都很复杂且具有误导性,对jQuery UI Auto Complete的一个关键理解是成功的匿名函数,由于AutoComplete的成功回调,您可以利用/控制服务器端JSON响应的格式.标签,值格式是一个很好的遵循,但您可以定义您想要的任何JSON格式,关键是如何定义您的成功函数:

 <input id="refPaymentTerms" class="form-control">

$("#refPaymentTerms").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "/admin/JobPaymentRefs",
                        dataType: "json",
                        data: {
                            term: request.termCode
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('Error: ' + xhr.responseText);
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.label,
                                    value: item.value
                                }
                            }));
                        }
                    });
                }
            });

MVC控制器:

public JsonResult JobPaymentRefs()
    {
        var query = from REFTerm in _db.REFTerms
                     select new
                    {
                        label = REFTerm.TermCode,
                        value = REFTerm.TermCode
                    };
        //var refTerms = _db.REFTerms.Select(x => x.TermCode);

        return Json(query.ToArray());
    }

在这里,我们看到一个非常标准的自动完成绑定与ASP.NET后端.

只要在AutoComplete匿名回调中正确映射,您就可以返回任何您希望服务器端的JSON格式.标签,值名称值对于大多数要求都足够好,但是在服务器端使用您的JSON只需在AutoComplete成功回调中正确映射它.