0

我有简单的 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>

4

2 回答 2

0

jQuery 为您处理 JSON 解析。如果您的 dataType 为“json”，则无需将其作为字符串发送或稍后解析结果。

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

您仍然需要解析从服务器返回的数据，因为自动完成需要一个简单的值数组或包含键的对象数组，label例如value：

[
    { label: 'London, England', value: 'LDN' },
    { label: 'Liverpool England', value: 'LPL' }
]

用于console.log()查看您获得的值并使其成为您期望/需要的值。

该文档有一个示例，您可以在此处遵循http://jqueryui.com/autocomplete/#remote-jsonp

尝试这个：

$(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
                };
            } ) );
        }
    });
};
于 2013-11-08T12:31:35.750 回答
0

尝试这样的事情

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

参考

http://jqueryui.com/autocomplete/#remote-jsonp

于 2013-11-11T11:26:01.197 回答