Potrzebuję pomocy przy pisaniu jquery / ajax, aby wypełnićWybierz2 upuścić pudło.

Dla tych, którzy nie wiedzą coWybierz2 jest to rozszerzenie javascript, które zapewnia wygląd Bootstrap Twittera oraz funkcje wyszukiwania / wyprzedzania listy rozwijanej listy wyboru HTML. Więcej informacji można znaleźć tutaj:Wybierz stronę 2 Github

W końcu połączyłem to wszystko i rozwiązanie moich problemów polegało na tym, że brakowało mi funkcji formatowania wyników i wyboru listy. Poniższy kod tworzy funkcjonowanieWybierz2 doskonale z rozwijaną listą rozwijaną.

Metoda Jsona na kontrolerze:

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
}

Powyższa metoda kontrolera Jsona zwraca listę szeregowanych obiektów Json, których nazwa elementu zawiera podany ciąg „zapytanie” (to „zapytanie” pochodzi z pola wyszukiwania wWybierz2 pole rozwijane).

Poniższy kod to Javascript w widoku (lub układ, jeśli wolisz) do zasilaniaWybierz2 pole rozwijane.

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

Następnie w treści widoku potrzebujesz ukrytego elementu wejściowego, któryWybierz2 spowoduje wyświetlenie skrzynki rozwijanej.

HTML:

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

Lub dołącz element MVC Razor html.hidden do swojego modelu widoku, aby umożliwić wysłanie wybranego przedmiotu z powrotem na serwer.

HTML (MVC Razor):

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