jQuery - 在自动完成中使用键/值对答案

【问题标题】：jQuery - Use key/value pair in autocompletejQuery - 在自动完成中使用键/值对
【发布时间】：2013-04-25 15:36:49
【问题描述】：

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

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

这是我认为的 jQuery 代码

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

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

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

【问题讨论】：

标签： asp.net-mvc-3 jquery-ui jquery jquery-ui-autocomplete

【解决方案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/

【讨论】：

有没有办法将数据属性附加到生成的lis？
@Andrew Whitaker 谢谢

【解决方案2】：

同上，稍加阐述

前端

<input id="CompanySearch" type="text" />

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetCompanyAutoComplete", "Admin")',
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>

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 结果格式

【讨论】：