[jquery] 自动完成请求/服务器响应是什么样的?


Answers

除了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响应的多位数据)

Question

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

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

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

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




您不需要调整服务器端脚本以使用jQuery UI自动完成。 您可以指定JavaScript函数作为创建自定义请求的source (例如,使用POST或GET,使用serever side脚本期望的查询字符串参数)并处理任意响应(例如处理XML响应)。

话虽如此,当您使用字符串作为source参数时,则:

[...] Autocomplete插件期望该字符串指向将返回JSON数据的URL资源。 它可以位于同一主机上,也可以位于不同的主机上(必须提供JSONP)。 自动完成插件不会过滤结果,而是使用术语字段添加查询字符串,服务器端脚本应使用该字段来过滤结果。 例如,如果source选项设置为http://example.com并且用户键入foo,则会向http://example.com?term=foo发出GET请求。 数据本身可以与上述本地数据的格式相同。

关于“数据本身可以采用与上述本地数据相同的格式” ,以下JSON(或JSONP)格式将起作用:

// no matching entries
[]

// array of strings
[
"Option 1",
"Option 2"
]

// array of objects with label property
[{
    "label": "Option 1"
}, {
    "label": "Option 2"
}]

// array of objects with value property
[{
    "value": "Option 1"
}, {
    "value": "Option 2"
}]

// array of objects with label and value properties
[{
    "label": "Option 1",
    "value": 1
}, {
    "label": "Option 2",
    "value": 2
}]

对于对象数组,除了标签和/或value之外,您还可以自由指定其他属性。 所有属性都将在回调中提供。




<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Autocomplete - Categories</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            .ui-autocomplete-category {
                font-weight: bold;
                padding: .2em .4em;
                margin: .8em 0 .2em;
                line-height: 1.5;
            }
            body {
                font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
                font-size: 62.5%;
            }
        </style>
        <script>
            $.widget("custom.catcomplete", $.ui.autocomplete, {
                _renderMenu : function(ul, items) {
                    var that = this, currentCategory = "";
                    $.each(items, function(index, item) {
                        if (item.category != currentCategory) {
                            ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                            currentCategory = item.category;
                        }
                        that._renderItemData(ul, item);
                    });
                }
            });
        </script>
        <script>
            $(function() {
                $("#search").catcomplete({
                    delay : 0,
                    source : function(request, response) {
                        $.ajax({
                            url : "search",
                            dataType : "json",
                            data :"searchText=hk",
                            success : function(data) {
                                response(data);
                            } //success
                        });
                    }
                });
            });
        </script>
    </head>
    <body>enter code here
        <label for="search">Search: </label>
        <input id="search" />
    </body>
</html>



Links