MVC 自动完成下拉问题

Question

我目前正在尝试使用类似于此处所示的 Jquery-UI 的自动完成功能：Autocomplete dropdown in MVC5? ...我现在使用 jquery 自动完成帮助器查看了许多帖子，但无法找到我的问题。我的问题是 ajax 调用发出并成功命中 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;
    }
  });
});

还有我非常简单的视图模型：

  public class ManualVerificationsViewModel
  {
    public string SelectedSchoolName { get; set; }

    public int SchoolId { get; set; }
  }

从我的控制器返回的数据示例如下： [ { label: "SeedSchool", value: 1 }

和来自 console.log(data) 结果的图片：

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
}]

自动完成不知道如何处理这些数据。它正在检测具有特定对象数据的数组：

具有标签和值属性的对象数组：[ { 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

我看到了 3 件事，第一是你在 GetSchools 方法的顶部没有 [HttpGet]。放置它，在 ajax 中第二位你必须放置类型类型：“GET”，并通过 url 发送数据，例如：

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

在网络配置中检查您是否允许大尺寸响应，并在 ajax 中放置一个错误函数以检查是否有问题。重要的是永远不要从数据库发送直接响应，将其序列化到本地对象，在其他情况下 json 响应崩溃。