Rellene el cuadro desplegable Select2 de la base de datos en MVC 4

Necesito ayuda para escribir el jquery / ajax para llenar unSelect2 caja desplegable.

Para quienes no saben queSelect2 Es decir, es una extensión de javascript para proporcionar la apariencia de Twitter Bootstrap y la función de búsqueda / escritura anticipada en un cuadro desplegable de lista de selección html. Para más información mira los ejemplos aquí:Página Select2 Github

Así que finalmente puse todo esto junto, y la solución a mis problemas fue que me faltaban funciones para formatear los resultados y la selección de la lista. El siguiente código produce un funcionamientoSelect2 Dropbox con tipografía anticipada perfectamente.

Método Json en el controlador:

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
}

El método del controlador Json anterior devuelve una lista de objetos Json serializados, cuyo ItemName contiene la cadena 'consulta' proporcionada (esta 'consulta' proviene del cuadro de búsqueda en elSelect2 caja de la gota).

El código a continuación es el Javascript en la vista (o diseño si lo prefiere) para alimentar elSelect2 caja de la gota.

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; }
});

Luego, en el cuerpo de la vista, necesita un elemento de entrada oculto, queSelect2 renderizará el dropbox a.

HTML:

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

O adjunte un elemento html.hidden de MVC Razor a su modelo de vista para que pueda publicar el Id del elemento seleccionado de nuevo en el servidor.

Html (MVC Razor):

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