带有自动完成问题的 jQueryUI Ajax 调用 - JSON 是否正确？从旧的自动完成迁移答案

【问题标题】：jQueryUI Ajax call with autocomplete issue - is the JSON correct? Migrating from old autocomplete带有自动完成问题的 jQueryUI Ajax 调用 - JSON 是否正确？从旧的自动完成迁移
【发布时间】：2011-12-23 22:51:18
【问题描述】：

我有以下使用旧的 Bassistance 自动完成功能：

    $('#searchLocation').autocomplete("/Utils.aspx", {
        dataType: 'json',
        minChars: 2,
        selectFirst: false,
        parse: function (data) {
            var rows = new Array();
            for (var i = 0; i < data.length; i++) {
                rows[i] = { data:data[i], value:data[i], result:data[i] };
            }
            return rows;
        },
        formatItem: function (row, i, n) {
            return row;
        }
    });

上面的方法可以正常工作，即为每个结果生成 LI，并在输入 $('#searchLocation') 的正下方生成一个下拉列表。

我需要迁移到新的 jQuery UI 自动完成，到目前为止我有以下内容：

$("#searchLocation").autocomplete({
        source: function( request, response ) {
            var area = $("#searchLocation").val();
            $.ajax({
                url: "/Utils.aspx",
                dataType: "json",
                data: {'q':area},
                success: function (data) {
                    console.log(data);
                    var rows = new Array();
                    for (var i = 0; i < data.length; i++) {
                        rows[i] = { data:data[i], value:data[i], result:data[i] };
                    }
                    return rows;
                }
            });
        },
        minLength: 2
    });

数据/JSON 来自：

["CM23 ","CM23 1 ","CM23 2 ","CM23 3 ","CM23 4 ","CM23 5 "]

但是，UL 没有被 LI 填充。没有错误 - 它只是不起作用。

我缺少什么 - 我需要编写创建 LI 的代码吗？我尝试了以下方法，但它不起作用：

    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + row + "</a>" )
        .appendTo( ul );
    };

任何帮助都会很棒。

【问题讨论】：

标签： json jquery-ui jquery autocomplete

【解决方案1】：

由于您的远程方法以字符串数组的形式返回数据，因此以下应该可以正常工作（无需后处理）：

$("#searchLocation").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/Utils.aspx",
                dataType: "json",
                data: {'q':request.term},
                success: response
            });
        },
        minLength: 2
});

关键是在你的AJAX成功方法中调用传递过来的response函数（由于你不需要任何后处理，你可以直接使用response函数作为你的AJAX成功方法）。

【讨论】：