MVC Autocomplete Dropdown Probleme

Question

Ich versuche derzeit, Jquery-UI Autocomplete-Funktionalität ähnlich wie hier gezeigt zu verwenden: Autocomplete dropdown in MVC5? ... Ich habe viele Beiträge jetzt mit jquery Autocomplete-Helfer überprüft und konnte mein Problem nicht finden. Mein Problem ist, dass der Ajax-Aufruf erlischt und die GetSchools-Aktion erfolgreich schlägt, die Aktion wird die richtigen und erwarteten Daten zurückgeben, aber dann passiert nichts. Es werden keine Optionen zur automatischen Vervollständigung angezeigt, und es werden keine Konsolenfehler angezeigt. Die success Funktion in meiner js wird mit der entsprechenden Anzahl von Elementen in data getroffen, aber nichts passiert danach. Alle Hilfe wird geschätzt.

Mein Controller-Aktionen:

public ActionResult ManualVerifications() 
    { 
     var vm = new ManualVerificationsViewModel(); 

     return View(vm); 
    } 

    [HttpPost] 
    public ActionResult ManualVerifications(ManualVerificationsViewModel vm) 
    { 
     return View(); 
    } 

    public JsonResult GetSchools(string term = "") 
    { 
     var schoolList = _schoolRepo.GetAll() 
     .Where(c => c.Name.ToLower().Contains(term.ToLower())) 
     .Select(x => new { label = x.Name, value = x.Id }) 
     .Distinct().ToList(); 

     return Json(schoolList, JsonRequestBehavior.AllowGet); 
    } 

My View (ManualVerifications.cshtml):

@model ProEdVerificationPortal.Data.ViewModels.Verification.ManualVerificationsViewModel 

@Html.LabelFor(model => model.SelectedSchoolName, new { @class = "control-label" }) 
@Html.TextBoxFor(model => model.SelectedSchoolName, new { @class = "form-control" }) 
@Html.HiddenFor(model => model.SchoolId) 

und der in der Ansicht gerendert JS:

$(document).ready(function() { 
    $("#SelectedSchoolName").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
     url: '/verification/getschools', 
     type: "GET", 
     datatype: "json", 
     data: { 
      term: request.term 
     }, 
     success: function (data) { 
      console.log(data); 
      response(data); 
     } 
     }) 
    }, 
    select: function (event, ui) { 
     $("#SelectedSchoolName").val(ui.item.label); 
     $("#SchoolId").val(ui.item.value); 
     return false; 
    }, 
    focus: function (event, ui) { 
     $("#SelectedSchoolName").val(ui.item.label); 
     return false; 
    } 
    }); 
}); 

und mein sehr einfaches Viewmodel :

[ { label: "SeedSchool", value: 1 }

und ein Bild von der console.log (Daten) Ergebnisse:

ein Beispiel für Daten Rückkehr aus meinem Controller folgendes wäre

Answer 1

Sieht aus, als ob Sie Ergebnisdaten nicht korrekt sind. Basierend auf der folgenden:

public JsonResult GetSchools(string term = "") 
{ 
    var schoolList = _schoolRepo.GetAll() 
    .Where(c => c.Name.ToLower().Contains(term.ToLower())) 
    .Select(x => new { Name = x.Name, Id = x.Id }) 
    .Distinct().ToList(); 

    return Json(schoolList, JsonRequestBehavior.AllowGet); 
} 

Ich würde erwarten, dass Ihre resultierende Datensatz ist wie:

[{ 
    "Name": "Berkley", 
    "Id": 1001 
}, 
{ 
    "Name": "UCSF", 
    "Id": 1002 
}] 

automatische Vervollständigung nicht weiß, was mit diesen Daten zu tun. Es ist especting ein Array mit spezifischen Objektdaten:

Ein Array von Objekten mit Etikett und Werteigenschaften: [ { label: "Choice1", value: "value1" }, ... ]

Sie mögen werden Ihre Ergebnisse anzupassen, dieses Format zu passen.

public JsonResult GetSchools(string term = "") 
{ 
    var schoolList = _schoolRepo.GetAll() 
    .Where(c => c.Name.ToLower().Contains(term.ToLower())) 
    .Select(x => new { label = x.Name, value = x.Id }) 
    .Distinct().ToList(); 

    return Json(schoolList, JsonRequestBehavior.AllowGet); 
} 

Und:

$(document).ready(function() { 
    $("#SelectedSchoolName").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
     url: '/verification/getschools', 
     type: "GET", 
     datatype: "json", 
     data: { 
      term: request.term 
     }, 
     success: function (data) { 
      response(data); 
     } 
     }) 
    }, 
    select: function (event, ui) { 
     $("#SelectedSchoolName").val(ui.item.label); 
     $("#SchoolId").val(ui.item.value); 
     return false; 
    }, 
    focus: function(event, ui) { 
     $("#SelectedSchoolName").val(ui.item.label); 
     return false; 
     } 
    } 
    }); 
}); 

aktualisieren 1

ein lite Beispiel Inklusive: https://jsfiddle.net/Twisty/4Lv9psd8/

aktualisieren 2

Ein Beispiel mit AJAX-Funktionalität und einem anderen Flare: https://jsfiddle.net/Twisty/4Lv9psd8/6/

Answer 2

Ich sehe 3 Dinge, die erste dass Sie [HttpGet] nicht oben in der GetSchools Methode haben. legen Sie es, auf dem zweiten Platz in der Ajax Du den Typ Typen legen müssen: „GET“, und die Daten über die URL, in Beispiel senden:

$.ajax({ 
     url: '/verification/getschools?term='+request.term, 
     datatype: "json", 
     type: "GET" 
     }); 

in der Web-Konfigurationsprüfung, die Sie hohe Größe Antworten erlauben und platziere eine fehlerfunktion im ajax um zu prüfen ob etwas falsch ist. Und es ist wichtig, niemals direkte Antworten von der Datenbank zu senden, diese zu einem lokalen Objekt zu serialisieren, in anderen Fällen jsons Antwort-Absturz.