如何將遠程數據加載到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代碼-用於顯示json的select2？

請幫忙

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

從文檔 ：

我的對象不使用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};
}