如何实现自动完成文本框，其中值来自模型？

Question

我有一个应用程序，它将包含许多数据集。我想创建一个文本框，其中包含与数据集标题匹配的自动完成功能。最初我使用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 []＆＃39;中获取数据时，失败并出现404错误。这可能是因为小部件在给定字符串时需要URL。

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

source: @Model.DatasetTitles.ToArray()

但这会产生语法错误。

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

Answer 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