如何实现值来自模型的自动完成文本框？答案

【问题标题】：How do I implement autocomplete textbox where values come from the model?如何实现值来自模型的自动完成文本框？
【发布时间】：2014-04-17 11:15:58
【问题描述】：

我有一个应用程序可以保存许多数据集。我想创建一个与数据集标题匹配的自动完成文本框。最初我使用jQuery's autocomplete widget 搜索数据库并且工作正常。但是，它太慢并且需要大量数据库。

我现在尝试通过在构建模型时获取标题列表并将其用于自动完成来实现它。但是我无法让它工作。

在我的模型中

public IEnumerable<string> DatasetTitles { get; set; }

在视图中

@Html.EditorFor(m => m.SearchFreeText)

和

    $(document).ready(function() {
    $('#SearchFreeText').autocomplete({
        source: '@Model.DatasetTitles.ToArray()'
    });
});

在尝试从位置“System.String[]”获取数据时失败并出现 404 错误。这可能是因为小部件在给定字符串时需要一个 URL。

接下来我尝试删除单引号，以便将其视为数组而不是字符串。

source: @Model.DatasetTitles.ToArray()

但这会产生语法错误。

有没有办法从模型中获取自动完成的术语列表？

【问题讨论】：

【解决方案1】：

您需要将您的 C# 数组转换为有效的 javascript 数组（即["a","b","c"...]）。有很多方法可以做到这一点，这是我的建议：

string.Concat("[", string.Join(",", Model.DatasetTitles.Select(s => string.Concat("'", s, "'"))), "]");

本质上，我将DatasetTitles 集合中的每个元素转换为javascript 字符串文字。然后用, 分隔符将它们连接起来，最后用方括号括起来。

不是特别优雅，几乎可以肯定有更好的方法来转换数据，但希望这会让你走上正确的轨道。

编辑：您还可以查看JavaScriptSerializer，它是将 C# 对象转换为有效 javascript 的框架类。与如上所示手动转换数据相比，这可能是可取的。请参阅此答案以获取示例：https://stackoverflow.com/a/9024029/61470

【讨论】：

这行得通，但如果其他人使用它，还有一些额外的要点值得牢记。 @Html.Raw 是必需的，因此不会对引号进行编码。 Resharper 也给出了正确解决方案的语法错误，但您可以忽略它。 @Html.Raw(new JavaScriptSerializer().Serialize(Model.DatasetTitles))