使用 c# 字典自动完成答案

【问题标题】：Autocomplete with c# dictionary使用 c# 字典自动完成
【发布时间】：2017-01-31 15:27:17
【问题描述】：

我正在使用 kendo UI (telerik)，我想添加一个数据源，它是一个从 c# 到 js 的解析为对象的字典。如何获取对象值并将它们添加到自动完成输入？我有这个代码：

var availableCategories = JSON.parse(@(Html.Raw(Json.Encode(@Model.AvailableCategoriesJSON))));

$(document).ready(function () {

var data=availableCategories;

$("#categories").kendoAutoComplete({
        dataSource: data,
        filter: "startswith",
        placeholder: "Select category...",
        separator: ", "
    });

和输入：

<input id="categories" />

【问题讨论】：

如果您的视图模型中有可用的类别，为什么要对 JSON 进行编码和解码？只需以数组语法输出即可。
因为我选择了一个分类后，我会保存分类Id。从 js 对象很容易做到这一点。
您有什么问题？什么不起作用？你能展示你的AvailableCategoriesJSON 内容吗？
AvailableCategoriesJSON 是一个 C# Dictionary 我将其转换为一个看起来像 { Guid : string } 的 js 对象，我想将此对象用作自动完成输入的数据源跨度>

标签： javascript c# asp.net-mvc kendo-ui telerik

【解决方案1】：

如果我猜对了，您的 availableCategories 对象将是这样的：

[{"0f8fad5b-d9cb-469f-a165-70867728950e": "category 1"},
 {"7c9e6679-7425-40de-944b-e07fc1f90ae7": "category 2"}]

但是您需要告诉小部件它将使用哪个属性。所以我建议你动态地创建另一个 dummy 属性，例如text:

data.forEach(x => {
    var k = Object.keys(x);

    x.text = x[k[0]];
});

// Shorthand:
data.forEach(x => x.text = x[Object.keys(x)[0]]);

然后你添加这个选项：

dataTextField: "text"

结果：

var data = [{"0f8fad5b-d9cb-469f-a165-70867728950e": "category 1"},
            {"7c9e6679-7425-40de-944b-e07fc1f90ae7": "category 2"}];

data.forEach(x => x.text = x[Object.keys(x)[0]]);

$("#categories").kendoAutoComplete({
      dataSource: data,
      filter: "startswith",
      placeholder: "Select category...",
      separator: ", ",
      dataTextField: "text",
      select: function(e) {
        console.log("Selected item", e.dataItem);
      }
});

Demo

【讨论】：