select2 удаленные данные: заполнить с помощью конечной точки Web API 2

Согласно заголовку, я использую последнее поле выбора select2 на странице HTML5 и, используя их пример, я делаю вызов созданной мной конечной точке Web API 2.

В целях тестирования конечная точка просто создает коллекцию тегов и возвращает результат в виде HttpResponseMessage. Вот некоторый код для визуализации всего этого:

Объект тега

public class TagData
{
    public string Id { get; set; }
    public string Text { get; set; }
}

Модель:

public class TagsModel
{
    public IEnumerable<TagData> Tags { get; set; }
}

Действие контроллера в проекте Web API 2:

    public IHttpActionResult Get()
    {
        var tags = new TagsModel()
        {
            Tags = new List<TagData>
            {
                new TagData()
                {
                    Id = "1",
                    Text = "Tag1"
                },
                new TagData()
                {
                    Id = "2",
                    Text = "Tag2"
                }
            }
        };
        return Ok(tags);
    }

Я запустил модульный тест, и все работает, также запуск теста в Fiddler4 с использованием композитора возвращает следующий ответ JSON:

{"Tags":[{"Id":"1","Text":"Tag1"},{"Id":"2","Text":"Tag2"},{"Id":"3","Text":"Tag3"}}]}

На странице HTML5 я добавил стандартный html-элемент select2:

    <select class='s2-search-box form-control' multiple='multiple'></select>

Идея здесь состоит в том, чтобы привязать элемент управления select2 к удаленным данным, а затем использовать функцию тегирования, чтобы пользователь мог найти тег, выбрать его и повторить, чтобы это было сделано с помощью этого вызова ajax:

    $(document).ready(function () {

        $(".s2-search-box").select2({
            ajax: {
                url: "http://localhost:54850/api/s2demo",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data, page) {
                    // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data
                    return {
                        results: data.Tags
                    };
                },
                cache: true
            }
        });
    });

Пока все хорошо, мои модульные тесты работают, и когда я использовал Firebug для проверки вызова ajax, я вижу, что данные возвращаются в правильном формате, и я могу отображать коллекцию data.Tags, поэтому я знаю, что данные есть, однако фактическое Выпадающий список select2 отображает список «неопределенных» элементов и фактически не отображает данные, которые я хочу, и не позволяет мне создавать теги из этих вариантов.

В качестве примечания я также пробовал это:

    $(".s2-search-box").select2({
        ajax: {
            url: "http://localhost:54850/api/s2demo",
            dataType: "json",
            type: "GET",
            data: function (params) {

                var queryParameters = {
                    term: params.term
                }
                return queryParameters;
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.Text,
                            id: item.Id
                        }
                    }),
                    pagination: {
                        more: data.more
                    }
                };
            }
        }
    });

Это работает тем, что я могу создать теги, чтобы они отображались в элементе управления select2 как:

тег1[x] тег2[x]

Однако выпадающий список отображается постоянно.

Я использую последнюю версию 4.0.2 библиотеки select2.

Заранее спасибо.

T