带有 JSON 数据源的奇怪 Kendo UI 自动完成错误答案

【问题标题】：Wierd KendoUI Autocomplete bug with JSON datasource带有 JSON 数据源的奇怪 Kendo UI 自动完成错误
【发布时间】：2013-06-25 02:09:15
【问题描述】：

我有一个转换为 JSON 的对象列表，我想将其加载到我的 KendoUi 自动完成控件中。

此代码不起作用

@{

    var suburbs = Html.Raw(Json.Encode(Model.Suburbs));

    <script>

    $(function () {

        var data = '@suburbs';

        $("#sSuburb").kendoAutoComplete({
                dataSource: data,
                filter: "startswith",
                placeholder: "Select suburb...",
                dataTextField: "SuburbName",
                dataValueField: "ID",
                separator: ", "
            });
     });
    <script>
}

但是这个是怎么工作的

 var data = [{ "ID": 1, "SuburbName": "NEWSTEAD", "PostCode": "4006", "State": "QLD", "CountryCode": 1 }, { "ID": 2, "SuburbName": "NEWSTEADS", "PostCode": "4006", "State": "QLD", "CountryCode": 1 }, { "ID": 4, "SuburbName": "NEWS", "PostCode": "4006", "State": "QLD", "CountryCode": 1 }, { "ID": 5, "SuburbName": "NEWSTEST", "PostCode": "4006", "State": "QLD", "CountryCode": 1 },];

  $("#sSuburb").kendoAutoComplete({
                dataSource: data,
                filter: "startswith",
                placeholder: "Select suburb...",
                dataTextField: "SuburbName",
                dataValueField: "ID",
                separator: ", "
            });

不用说，两个示例中的 JSON 结果是相同的。我在这里有什么遗漏吗？

更新：

我也尝试过 JSON.Stringify 但仍然没有运气

    var data = JSON.stringify(@suburbs);

这是我使用 alert(data) 时的实际 json 结果；

[{"ID":1,"SuburbName":"NEWSTEAD","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":2,"SuburbName":"NEWSTEADS","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":4,"SuburbName":"NEWS","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":5,"SuburbName":"NEWSTEST","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":6,"SuburbName":"NETWORK","PostCode":"9006","State":"QLD","CountryCode":1},{"ID":7,"SuburbName":"NEW JERS","PostCode":"9006","State":"QLD","CountryCode":1},{"ID":8,"SuburbName":"SYDNEY","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":9,"SuburbName":"SYDNEYHAM","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":10,"SuburbName":"SYD","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":11,"SuburbName":"SYRACUSE","PostCode":"2001","State":"NSW","CountryCode":1},{"ID":12,"SuburbName":"SYDTEST","PostCode":"9001","State":"NSW","CountryCode":1},{"ID":13,"SuburbName":"SYDDD","PostCode":"9001","State":"NSW","CountryCode":1}]

与硬编码的明显相同。

但是当我在萤火虫中查看它并观察data 变量时在第一个示例中，它似乎被视为普通字符串

"[{"ID":1,"SuburbName":"NEWSTEAD","PostCode":"4006","State":"QLD","CountryCode":1},{"ID":2,"SuburbName":"NEWSTEADS","PostCode":"4006","State":"QLD","CountryCode":1}....

在第二个例子中，萤火虫的手表显示

[Object { ID=1, SuburbName="NEWSTEAD", PostCode="4006", more...}, Object { ID=2, SuburbName="NEWSTEADS".......

*注意第二个中的Object。 *第二个工作正常。

【问题讨论】：

可以显示@suburbs的内容吗？ - 您可以使用 Console.log(@suburbs) 或 alert(@suburbs) 获取它。这将有助于识别问题。
查看我的编辑，我使用了警报（数据）
如果我使用 alert(@suburb) 这是结果 - [object Object],[object Object],[object Object],[object Object],[object Object],[object Object] ,[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]
我使用萤火虫检查了它并观看了data，似乎在第一个示例中，data 被视为普通字符串，而在第二个示例中，它是对象列表跨度>
然后使用Kendo datasource从服务器读取数据。

标签： jquery json razor kendo-ui kendo-asp.net-mvc

【解决方案1】：

问题出在以下语句中：

var data = '@suburbs';

“data”变量是一个字符串，它不是dataSource 选项的有效设置。你可以试试var data = @suburbs;，因为你真的想要一个 JavaScript 数组而不是字符串。

【讨论】：

好的，它确实在 IDE 中显示语法错误（可能是一个错误），但是当您运行它时，它可以工作。 :)

【解决方案2】：

使用Kendo datasource 并从中读取服务器的数据。

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {            
            url: serverMethodURL,  // the remote service url
            dataType: "jsonp",     // JSONP is required for cross-domain AJAX

            // additional parameters sent to the remote service
            data: {
                q: "html5"
            }
        }
    },
    // describe the result format
    schema: {
        // the data which the data source will be bound to is in the "results" field
        data: "results"
    }
});

然后将其绑定到自动完成（如演示）

$("#sSuburb").kendoAutoComplete({
      dataSource: dataSource,....

【讨论】：