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

Question

在我的ASP MVC视图中,我从控制器传回一个键/值对.在查看提琴手并在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变量添加到浏览器调试器的监视列表中,我会注意到标签和值完全相同.但是,我再次看到返回的是完整的键/值对.

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

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/