Question

我有以下功能使用旧的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
    });

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

任何帮助都会很棒。

Answer 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成功方法）。

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

1 个答案: