MVC 자동 완성 드롭 다운 문제

Question

현재 여기에 표시된 것과 비슷한 Jquery-UI의 자동 완성 기능을 사용하려고합니다 : Autocomplete dropdown in MVC5? ... jquery 자동 완성 헬퍼를 사용하여 많은 게시물을 검토하고 내 문제를 찾을 수 없습니다. 내 문제는 아약스 호출이 나가고 GetSchools 작업에 성공적으로 도달하면 작업에서 정확하고 예상 된 데이터를 반환하지만 아무 일도 일어나지 않는다는 것입니다. 자동 완성 옵션이 표시되지 않으며 콘솔 오류가 나타나지 않습니다. 내 js에있는 success 함수는 data에있는 항목 중 적절한 수와 충돌하지만 그 이후에는 아무 일도 발생하지 않습니다. 모든 도움을 주시면 감사하겠습니다.

내 컨트롤러 조치 :

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

내보기 (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) 

하고 뷰에서 렌더링 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; 
    } 
    }); 
}); 

내 아주 간단한 뷰 모델 :

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

과 CONSOLE.LOG에서 사진 (데이터) 결과 :

내 컨트롤러에서 데이터 반환의 예는 다음과 같은 것이 나는 3 일을 볼

Answer 1

결과 데이터가 올바르지 않습니다. 다음 기준 자료 :

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

내가 기대 당신의 결과 데이터 세트는 같은 수 있습니다 :

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

자동 완성이 데이터로 무엇을 해야할지하지 않습니다. 그것은 특정 개체의 데이터 배열을 especting 것 :

레이블과 값 속성을 가진 객체의 배열 :이 형식에 맞게 결과를 조정할 수 있습니다 [ { label: "Choice1", value: "value1" }, ... ]

.

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

그리고 : 라이트 예를 포함

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

업데이트 1

: https://jsfiddle.net/Twisty/4Lv9psd8/

업데이트 2

AJAX 기능 및 기타 플레어가있는 예 : https://jsfiddle.net/Twisty/4Lv9psd8/6/

Answer 2

을 첫 번째입니다 GetSchools 메서드의 맨 위에 [HttpGet]이 없습니다. "GET"예에서 URL을 통해 데이터를 보내 : 당신이 유형 유형을 배치해야합니다 아약스에서 2 위, 배치

이 높은 크기 응답을 허용하는 웹 구성 검사에서

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

및 아약스에 오류 기능을 배치하여 문제가 있는지 확인하십시오. 그리고 데이터베이스에서 직접 응답을 보내지 말고, 로컬 객체에 직렬화하거나, 다른 경우에는 json 응답을 중단시키는 것이 중요합니다.