Kendo ui 剑道自动完成不显示

Kendo ui 剑道自动完成不显示,kendo-ui,kendo-grid,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 + '"/>')

我有一个自定义编辑器,用于自动完成。正在调用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;
                    }
                }
            })
        });
}
函数MyAutoCompleteTeditor(容器、选项){
$('')
.appendTo(容器)
kendoAutoComplete先生({
自动绑定:错误,
建议:是的,
延误:500,
数据源:新建kendo.data.dataSource({
是的,
运输:{
阅读:功能(opt){
$.getJSON(“/myWebService/GetData”);
},
},
模式:{
错误:函数(e){
返回e;
},
解析:函数(数据){
返回数据。名称;
}
}
})
});
}
更新:

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

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"
                    }                        
                }
            })
        });
}
[{“地址”:“123第一街”,“身份证”:“1”,“姓名”:“大卫”},{“地址”:“234第二街”,“身份证”:“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);
                }
            })
        });
}
函数MyAutoCompleteTeditor(容器、选项){
$('')
.appendTo(容器)
kendoAutoComplete先生({
dataValueField:“名称”,
自动绑定:错误,
建议:是的,
延误:500,
数据源:新建kendo.data.dataSource({
是的,
运输:{
阅读:{
url:函数(opt){
返回“/myWebServices/GetData/”+opt.filter.filters[0].value;
},
数据类型:“json”
}                        
},
模式:{
错误:函数(e){
返回e;
}
},
数据:功能(响应){
返回$.parseJSON(响应);
}
})
});
}
更新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"
                    }                        
                }
            })
        });
}
函数MyAutoCompleteTeditor(容器、选项){
$('')
.appendTo(容器)
kendoAutoComplete先生({
dataValueField:“名称”,
自动绑定:错误,
建议:是的,
延误:500,
数据源:新建kendo.data.dataSource({
是的,
运输:{
阅读:{
url:函数(opt){
返回“/myWebServices/GetData/”+opt.filter.filters[0].value;
},
数据类型:“json”
}                        
}
})
});
}

问题在于功能的实现。此函数应使用要返回的数据调用
opt.success
。您所做的是从URL检索数据,但不返回此类数据

但在您的情况下,似乎没有做任何特殊的事情(不需要定义函数)。因此,您可以将其定义为
对象
,只需定义

您可以使用:

dataSource: new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: {
            url : "/myWebService/GetData"
        }
    },
    schema: {
        parse: function (data) {
            return data.Name;
        }
    }
})
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"
                }
            }
        })
    });
}
编辑:要在服务器返回数据时使用数据,而无需解析数据,可以使用:

dataSource: new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: {
            url : "/myWebService/GetData"
        }
    },
    schema: {
        parse: function (data) {
            return data.Name;
        }
    }
})
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"
                }
            }
        })
    });
}
函数MyAutoCompleteTeditor(容器、选项){
$(“”).appendTo(container.kendoAutoComplete({
自动绑定:错误,
建议:是的,
延误:500,
dataValueField:“名称”,
数据源:新建kendo.data.dataSource({
运输:{
阅读:{
url:“/myWebService/GetData”
}
}
})
});
}

诀窍是定义
dataValueField
,该字段定义返回数组的哪个值是
autocomplete

OnaBai的值,感谢您的回复。我遵循了您的代码,并能够在parse()上找到断点。但是,数据显示“未定义”,尽管其中确实包含数据([[object,object][object,object]..)。我怎么称呼它?此外,我还硬编码了url,但实际上我需要url类似于“/myWebService/GetData/”+(无论用户输入的是什么),我该怎么做?请您显示返回数据的格式好吗?尝试在解析函数或警报(JSON.stringify(data))中插入
console.log(data)
并更新原始帖子。我会调查一下的。女白,谢谢。我已经更新了关于data.OnaBai的原始帖子,添加dataValueField对我来说仍然不起作用。schema.errors中的断点实际上被命中,但当我查看e对象时,它包含与web服务返回的数据完全相同的数据,并且没有错误。我已经提取了代码来向您展示schema.errors()