Question

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

Answer 1

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

Answer 2

尝试这样的事情

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

参考

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

jquery AJAX Autocomplete无法追加

2 个答案: