如何将远程数据加载到 select2 并按标题搜索

Question

我在查询中使用 (FOR JSON PATH, WITHOUT_ARRAY_WRAPPER) 返回了一些数据。我在我的服务器端（mvc 控制器）调用这个查询来获取 json 数据，所以我以后可以在我的视图中将它加载到 select2 中。

我在我的电影控制器中使用此代码

public async Task<ActionResult> DisplayMovies()
    {
        Movies [] movieList = await movieStorage.GetAllMovies();

        if(Request.IsAjaxRequest())
        {
            return Json(movieList, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return View();
        }
    }

当我调试这段代码时，调试器会像这样返回 json：

[{"Title": "Shawshank Redemption", "Director": "Frank Darabont", "Genre": "Drama", "ReleaseYear": "1994", "Rating": "9,3"},
{"Title": "Shutter Island", "Director": "Martin Scorsese", "Genre": "Mystery", "ReleaseYear": "2010", "Rating": "8,1"},
{"Title": "Pulp Fiction", "Director": "Quentin Tarantino", "Genre": "Crime", "ReleaseYear": "1994", "Rating": "8,9"}]

这是我的 .js

var myUrl = '@Url.Action("DisplayMovies", "Movies")';
$('.myMovies').select2(   {
    placeholder: 'Select movie...' ,
    minimumInputLength: 1,
    ajax: { 
        url: myUrl,
        dataType: 'json',
        data: function (term, page) {
            return {
                searchTerm: term
            };
        },
        results: function (data, page) {                                                     
            return {results: data};
        }
    }
});

和html

<select class="myMovies" multiple="multiple">
</select>

但是，当我运行它时，在 chrome 或 firefox 的控制台中没有结果，也没有错误。

如果我将我的电影控制器更改为这样的静态控制器，它会突然起作用：

public async Task<ActionResult> DisplayMovies()
    {
        var list = new[]
        {
            new { id = 0, title = "Shawshank Redemption" },
            new { id = 1, title = "Shutter Island" },
            new { id = 2, title = "Pulp Fiction" },
        }.ToList();

        if (Request.IsAjaxRequest())
        {
            Object json = JsonConvert.SerializeObject(list);
            return Json(json, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return View();
        }
    }

为什么这行得通，但当我从数据库中获取数据时却不行？错误在哪里？我从数据库中获取的 json 不正确，还是 javascript 代码 - select2 用于显示 json？

请帮忙

Answer 1

所以这个电话

Movies [] movieList = await movieStorage.GetAllMovies();

返回这个json

[{"Title": "Shawshank Redemption", "Director": "Frank Darabont", "Genre": "Drama", "ReleaseYear": "1994", "Rating": "9,3"},
{"Title": "Shutter Island", "Director": "Martin Scorsese", "Genre": "Mystery", "ReleaseYear": "2010", "Rating": "8,1"},
{"Title": "Pulp Fiction", "Director": "Quentin Tarantino", "Genre": "Crime", "ReleaseYear": "1994", "Rating": "8,9"}]

它与有效的 json 不匹配

[
{"id": 0, "title":"Shawshank Redemption"}
...
]

因此，调整您的查询响应以匹配有效的结构。

Movies [] movieList = await movieStorage.GetAllMovies()
    .Select((v,i) => new { id = i, title = v.Title }).ToArray();

Answer 2

来自docs：

我的对象不使用 id 作为其唯一标识符，我该怎么办？

Select2 要求使用 id 属性来唯一标识结果列表中显示的选项。如果您使用 id 以外的属性（如 pk）来唯一标识选项，则需要先将旧属性映射到 id，然后再将其传递给 Select2。

我的对象使用文本以外的属性来显示需要显示的文本

与 id 属性一样，Select2 要求应为选项显示的文本存储在 text 属性中。您可以使用以下 JavaScript 从任何现有属性映射此属性。

您需要将某种id 与您的数据库中的记录一起返回，以便您可以将它与select2 一起使用。然后你像这样映射你的结果：

results: function (data, page) {
    var data = $.map(data, function (obj) {
        obj.id = obj.someID;//some id you don't have right now
        obj.text = obj.Title;
        return obj;
    });
        return {results: data};
}