剑道自动完成未显示 [英] Kendo AutoComplete Not Displaying

问题描述

我有一个用于自动完成功能的自定义编辑器. Web服务正在被调用并返回数据.但是，在编辑器中没有什么破灭的事情.我在schema.parse()中设置了一个断点，但从未实现.我想念什么?

I have a custom editor that I use with autocomplete. The web service is getting called and returning the data. However, nothing is diaplying in the editor. I put a breakpoint in schema.parse() but it's never hit. What am I missing?

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

更新:

通过JSON.stringfy(data)显示时，数据如下所示:

The data, when shown via JSON.stringfy(data) is like this:

[{地址":"123 1st St."，"ID":"1"，名称":"David"}，{地址":"234 2nd St."，"ID":"2，" Name:" Smith}]

[{"Address":"123 1st St.","ID":"1","Name":"David"},{"Address":"234 2nd St.","ID":"2","Name":"Smith"}]

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

更新3:

最后通过删除纲要和数据部分使其工作.接受OnaBai的回答，因为他肯定为我指明了正确的方向.最终代码如下:

Finally got it working by removing the schema and data section. Accepting OnaBai's answer since he definitely pointed me to the right direction. The final code looks like this:

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

推荐答案

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

The problem is the implementation of read function. This function should invoke opt.success with data that you want to return. What you are doing is retrieving data from a URL but you are not returning such data.

但是在您的情况下，您似乎没有做任何特别的事情(无需定义函数).因此，您可以将其定义为Object，而只需定义

But in your case it seem that you don't do anything special (no need for defining a function). So you can define it as an Object and just define transport.read.url

您可以使用:

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

编辑:要在服务器返回数据时使用数据，而不必进行解析，则可以使用:

EDIT: For using the data as the server returns it and do not have to parse, you can use:

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

技巧是定义dataValueField，该c4>定义返回数组的哪个值是autocomplete的值.

The trick is defining dataValueField that defines which value of the returned array is the value of the autocomplete.

这篇关于剑道自动完成未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！