Question

这似乎是一个黑洞：经过一个小时的搜索jQuery UI网站，Stack Overflow和谷歌搜索，我还没有找到如何编写服务器端的最基本信息的自动完成功能。

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

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

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

Answer 1

将哪个参数传递给服务器

您需要将request.term传递给服务器端代码（来自文档）：

一个请求对象，只有一个被称为“术语”的财产到文本中当前的值输入

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

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

JSON响应应该是什么样的样的？

autocomplete窗口小部件需要一个具有label和value属性的JSON对象数组（尽管如果您只指定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
                }
            }));
         }
    });

此代码取自示例here（这是一个很好的例子，ajax + autocomplete在更复杂的情况下工作）。

基本上，在成功的ajax请求之后，接收到的数据正在被标准化（使用$.map）到自动完成小部件所期望的内容。

希望有所帮助。

Answer 2

除了Andrew Whitaker的完美答案外，$ .map的另一种方法是覆盖渲染器，an example of which is shown on the jQuery UI Demo page.

我使用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成功回调中正确映射它。

Answer 4

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

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

[...] Autocomplete插件希望该字符串指向一个URL 将返回JSON数据的资源。它可以在同一主机上或上一个不同的（必须提供JSONP）。自动完成插件没有过滤结果，而是使用 term 字段添加查询字符串，服务器端脚本应该用于过滤结果。对于例如，如果source选项设置为http://example.com并且用户类型为foo，将发出GET请求 http://example.com?term=foo。数据本身可以采用相同的格式作为上述本地数据。

关于“数据本身可以采用与上述本地数据相同的格式”，以下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
}]

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

Answer 5

以下代码对我有用。这需要json编码数据才能工作。获取数据后，它会根据jQuery自动完成格式对其进行修改，并启用选择

currentBuild.currentResult

Answer 6

<!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>

Answer 7

以下自动填充来自https://jqueryui.com/autocomplete/#remote-jsonp

演示链接：https://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

以下是源代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
    .ui-autocomplete-loading {
        background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#birds" ).autocomplete({
            source: function( request, response ) {
                $.ajax( {
                    url: "search.php",
                    dataType: "jsonp",
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                } );
            },
            minLength: 2,
            select: function( event, ui ) {
                log( "Selected: " + ui.item.value + " aka " + ui.item.id );
            }
        } );
    } );
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

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

7 个答案:

JSON响应

的jQuery