Ich brauche Hilfe beim Schreiben der jquery / ajax, um a zu füllenSelect2 Dropdown-Feld.

Für diejenigen, die nicht wissen, wasSelect2 ist, es ist eine JavaScript-Erweiterung, um Twitter-Bootstrap-Looks und Such- / Tippfunktionen in einem Dropdown-Feld mit einer HTML-Auswahlliste bereitzustellen. Weitere Informationen finden Sie in den Beispielen hier:Select2 Github Seite

Also habe ich endlich alles zusammengestellt und die Lösung für meine Probleme bestand darin, dass mir Funktionen zum Formatieren der Ergebnisse und der Listenauswahl fehlten. Der folgende Code erzeugt eine FunktionSelect2 dropbox mit typ-ahead perfekt.

Json-Methode auf dem 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
}

Die obige Json - Controller - Methode gibt eine Liste serialisierter Json - Objekte zurück, deren ItemName die angegebene Zeichenfolge "query" enthält (diese "query" stammt aus dem Suchfeld in derSelect2 Dropbox).

Der folgende Code ist das Javascript in der Ansicht (oder das Layout, wenn Sie es vorziehen), um das zu betreibenSelect2 Drop-Box.

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

Dann benötigen Sie im Hauptteil der Ansicht ein verstecktes Eingabeelement, dasSelect2 wird die Dropbox zu rendern.

HTML:

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

Oder hängen Sie ein MVC Razor html.hidden-Element an Ihr Ansichtsmodell an, damit Sie die ID des ausgewählten Elements wieder auf dem Server veröffentlichen können.

Html (MVC Razor):

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