jquery AJAX自动完成无法追加_Jquery_Jquery Autocomplete

jquery AJAX自动完成无法追加

jquery

jquery AJAX自动完成无法追加,jquery,jquery-autocomplete,Jquery,Jquery Autocomplete,我有一个简单的jquery自动完成功能，可以从服务中获取Json结果，我想用自动完成显示返回的结果，但什么也没发生。虽然看起来很简单，但我真的不知道如何解决这个问题 <body> <label for="txtSearch">Select a programming language: </label> <input id="txtSearch"/> <div id="results"></div> <scri

我有一个简单的jquery自动完成功能，可以从服务中获取Json结果，我想用自动完成显示返回的结果，但什么也没发生。虽然看起来很简单，但我真的不知道如何解决这个问题

 <body>

<label for="txtSearch">Select a programming language: </label>
<input id="txtSearch"/>
 <div id="results"></div>

<script>
    $(document).ready(function(){
        $("#txtSearch").autocomplete({
            source: rez,
            appendTo: "#results"
        });
    });

    var rez = function search2() {
        if ($("#txtSearch").val().length > 2) {
            $.ajax({
                type: "post",
                url: "Search.aspx/GetCity",
                data: "{'cityName':'" + $("#txtSearch").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = $.parseJSON(result.d);
                    return obj;
                }
            });
        }
    };
</script>

jQuery为您处理JSON解析。如果您的数据类型是json，则无需将其作为字符串发送或随后解析结果

您遇到的具体问题是，您的rez函数没有传递给它所需的参数request和response。request是一个具有与搜索词相关属性的对象，例如request.term。response是一个回调函数，您需要在$.ajax success函数中调用它，以便将数据传递回autocomplete

您仍然需要解析从服务器返回的数据，尽管autocomplete需要一个简单的值数组或包含键标签和值的对象数组，例如：

使用console.log查看您获得的值，并使它们符合您的期望/需要

文档中有一个示例，您可以在此处进行操作

试试这个：

$(document).ready(function(){
    $("#txtSearch").autocomplete({
        source: rez,
        appendTo: "#results",
        minLength: 2 // this will check the input is at least 2
    });
});

// request is the search request object,
// response is the callback to pass data back to autocomplete
var rez = function search2( request, response ) {
    $.ajax({
        type: "post",
        url: "Search.aspx/GetCity",
        data: { cityName: request.term },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            // results have to be returned via the response callback as 
            // label/value pairs or just an array of values
            response( $.map( result, function( item ) {
                return {
                    label: [ item.CityName, item.Country, item.Region].join( ', ' ),
                    value: item.ID
                };
            } ) );
        }
    });
};

试试这样的

        success: function( data ) {
            response( $.map( data, function( item ) {
                return {
                label: item.CityName,
                value: item.ID
                }
            }));
        }

参考文献

记录obj并显示结果。它可能不需要。这是我得到的回应，我可以在警报中显示它，但当返回到自动完成时它什么也不做[{ID:377020，城市名称：Lon，国家：西班牙，地区：欧洲}，{ID:114927，城市名称：Lonaconing，国家：马里兰州，地区：美洲}，{ID:375281，城市名称：Lonand，国家：印度，地区：亚洲}，{ID:74190，城市名称：Lonate Ceppino，国家：意大利，地区：欧洲}，{ID:419873，城市名称：Lonate Pozzolo，国家：意大利，地区：欧洲}]不，这也不起作用。函数完成了，但什么也没有发生。好的，你应该遵循jQuery UI文档中的示例。插件希望响应以特定的方式格式化，并且必须传递给回调函数。我已经更新了我的答案以反映它。感谢你的努力，但我现在无法解决这个问题。我n同时，我设法做到了这一点，但只使用将我的响应作为XT保存的变量。现在，与您更新的答案是一样的。正在调用该服务，它返回的响应看起来有效，但什么也没有发生。我检查了响应，甚至将其放入JS变量中，然后一切正常，但如果我使用direct call insteaJson var的d，然后没有显示任何结果。我不知道这里的哪一部分可能出错？我使用的是ASP.NetWi您使用的是哪个版本的jquery和jqueryui？

        success: function( data ) {
            response( $.map( data, function( item ) {
                return {
                label: item.CityName,
                value: item.ID
                }
            }));
        }