Kendo自动完成不显示

not*_*lkk 3 kendo-ui kendo-grid

我有一个自定义编辑器,我使用自动完成功能.Web服务被调用并返回数据.但是,编辑中没有任何内容.我在schema.parse()中放了一个断点,但它永远不会被击中.我错过了什么?

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            autoBind: false,
            suggest: true,
            delay: 500,
            dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
                    read: function (opt) {
                        $.getJSON("/myWebService/GetData");
                    },
                },
                schema: {
                    errors: function (e) {
                        return e;
                    },
                    parse: function (data) {
                        return data.Name;
                    }
                }
            })
        });
}
Run Code Online (Sandbox Code Playgroud)

更新:

通过JSON.stringfy(数据)显示的数据如下所示:

[{"地址":"123 1st St.","ID":"1","Name":"David"},{"Address":"234 2nd St.","ID":"2", "名称": "史密斯"}]

更新2:

代码现在看起来像这样:

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            dataValueField: "Name",
            autoBind: false,
            suggest: true,
            delay: 500,
            dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
                    read: {
                        url: function (opt) {
                            return "/myWebServices/GetData/" + opt.filter.filters[0].value;
                        },
                        dataType: "json"
                    }                        
                },
                schema: {
                    errors: function (e) {
                        return e;
                    }
                },
                data: function (response) {
                    return $.parseJSON(response);
                }
            })
        });
}
Run Code Online (Sandbox Code Playgroud)

更新3:

最后通过删除模式和数据部分来实现它.接受OnaBai的答案,因为他肯定指出了正确的方向.最终代码如下所示:

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            dataValueField: "Name",
            autoBind: false,
            suggest: true,
            delay: 500,
            dataSource: new kendo.data.DataSource({
                serverFiltering: true,
                transport: {
                    read: {
                        url: function (opt) {
                            return "/myWebServices/GetData/" + opt.filter.filters[0].value;
                        },
                        dataType: "json"
                    }                        
                }
            })
        });
}
Run Code Online (Sandbox Code Playgroud)

Ona*_*Bai 6

问题是read功能的实现.此函数应调用opt.success您要返回的数据.您正在做的是从URL检索数据,但您没有返回此类数据.

但在你的情况下,似乎你没有做任何特殊的事情(不需要定义一个函数).所以你可以将它定义为一个Object并且只是定义transport.read.url

您可以使用:

dataSource: new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: {
            url : "/myWebService/GetData"
        }
    },
    schema: {
        parse: function (data) {
            return data.Name;
        }
    }
})
Run Code Online (Sandbox Code Playgroud)

编辑:为了在服务器返回数据时使用数据而不必解析,您可以使用:

function myAutoCompleteEditor(container, options) {
    $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container).kendoAutoComplete({
        autoBind      : false,
        suggest       : true,
        delay         : 500,
        dataValueField: "Name",
        dataSource    : new kendo.data.DataSource({
            transport: {
                read: {
                    url : "/myWebService/GetData"
                }
            }
        })
    });
}
Run Code Online (Sandbox Code Playgroud)

诀窍是定义dataValueField返回数组的哪个值是值的值autocomplete.