Preencha a caixa suspensa Select2 do banco de dados no MVC 4

Preciso de ajuda para escrever o jquery / ajax para preencher umSelect2 caixa suspensa.

Para quem não sabe o queSelect2 é, é uma extensão de javascript para fornecer aparência de Twitter Bootstrap e funcionalidade de pesquisa / digitação antecipada para uma caixa suspensa de lista de seleção de html. Para mais informações, veja os exemplos aqui:Página Select2 Github

ATUALIZADO - Resolvido!

Então eu finalmente coloquei tudo isso junto, e a solução para meus problemas foi que eu estava faltando funções para formatar os resultados e a seleção da lista. O código abaixo produz um funcionamentoSelect2 dropbox com digitação perfeitamente.

Método Json no Controller:

public JsonResult FetchItems(string query)
{
    DatabaseContext dbContext = new DatabaseContext(); //init dbContext
    List<Item> itemsList = dbContext.Items.ToList(); //fetch list of items from db table
    List<Item> resultsList = new List<Item>; //create empty results list
    foreach(var item in itemsList)
    {   
        //if any item contains the query string
        if (item.ItemName.IndexOf(query, StringComparison.OrdinalIgnoreCase) >= 0) 
        {
            resultsList.Add(item); //then add item to the results list
        }
    }
    resultsList.Sort(delegate(Item c1, Item c2) { return c1.ItemName.CompareTo(c2.ItemName); }); //sort the results list alphabetically by ItemName
    var serialisedJson = from result in resultsList //serialise the results list into json
        select new
        {
            name = result.ItemName, //each json object will have 
            id = result.ItemID      //these two variables [name, id]
        };
    return Json(serialisedJson , JsonRequestBehavior.AllowGet); //return the serialised results list
}

O método do controlador Json acima retorna uma lista de objetos Json serializados, cujo ItemName contém a string 'query' fornecida (essa 'consulta' vem da caixa de pesquisa noSelect2 Dropbox).

O código abaixo é o Javascript na visão (ou layout, se você preferir) para alimentar oSelect2 Dropbox.

Javascript:

$("#hiddenHtmlInput").select2({
    initSelection: function (element, callback) {
        var elementText = "@ViewBag.currentItemName";
        callback({ "name": elementText });
    },
    placeholder: "Select an Item",
    allowClear: true,
    style: "display: inline-block",
    minimumInputLength: 2, //you can specify a min. query length to return results
    ajax:{
        cache: false,
        dataType: "json",
        type: "GET",
        url: "@Url.Action("JsonControllerMethod", "ControllerName")",
        data: function (searchTerm) {
            return { query: searchTerm };
        },
        results: function (data) { 
            return {results: data}; 
        }
    },
    formatResult: itemFormatResult,
    formatSelection: function(item){
        return item.name;
    }
    escapeMarkup: function (m) { return m; }
});

Então, no corpo da visão, você precisa de um elemento de entrada oculto, queSelect2 irá renderizar o dropbox para.

Html:

<input id="hiddenHtmlInput" type="hidden" class="bigdrop" style="width: 30%" value=""/>

Ou anexe um elemento html.hidden do MVC Razor ao seu modelo de exibição para permitir que você poste o ID do item escolhido de volta no servidor.

Html (MVC Razor):

@Html.HiddenFor(m => m.ItemModel.ItemId, new { id = "hiddenHtmlInput", @class = "bigdrop", style = "width: 30%", placeholder = "Select an Item" })

questionAnswers(3)

yourAnswerToTheQuestion