jQuery – 在自动完成中使用键/值对

在我的ASP MVC视图中，我从控制器传回一个键/值对。 在查看提琴手并在Chrome的调试器中查看之后，我可以看到信息正在被正确传回。

我希望键/值对的值是autocomplete列表中显示的项目。 当用户从列表中选择一个项目时，我希望将该项目的key放入文本框中。

这是我视图中的jQuery代码

 $(function () { $('#DRMCompanyId').autocomplete({ source: '@Url.Action("compSearch", "AgentTransmission")', minLength: 2, select: function (event, ui) { $('#DRMCompanyId').val(ui.item.label); } }); }); 

我注意到的一件事 – 如果我将ui变量添加到浏览器调试器的监视列表中，我注意到标签和值完全相同。 但是，我再次看到返回的是完整的键/值对。

以下是搜索完成后网络/响应控制台的屏幕截图。 有些数据是私有的，所以我把它涂黑了但是你可以看到有一个键/值对返回。

Answer 1

您需要自己制作AJAX请求并将数据转换为jQueryUI期望的格式：

 $(function () { $('#DRMCompanyId').autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("compSearch", "AgentTransmission")', type: 'GET', dataType: 'json', data: request, success: function (data) { response($.map(data, function (value, key) { return { label: value, value: key }; })); } }); }, minLength: 2 }); }); 

此外，当选择该项时，自动完成项的value属性会自动放入input ，因此不需要自定义select处理程序。

示例： http ： //jsfiddle.net/Aa5nK/60/

Answer 2

与上面相同，有点阐述

前端

C＃

 public JsonResult GetCompanyAutoComplete(string term) { var search = term.Trim(); var itemList = (from items in db.TblProductSuggestionFirsts where items.Name.StartsWith(search) select new { label = items.Name, value = items.Name }).Take(50).ToList(); return Json(itemList, JsonRequestBehavior.AllowGet); } 

Json结果格式