0

当用户开始在DRMCompanyName输入文本框中输入内容时，会触发自动完成功能，同时显示公司名称和公司 ID。当用户单击选择时，公司名称和 ID 将被放置在DRMCompanyName文本框中，而 id 将被放置在DRMCompanyId正下方的文本框中。

当json从控制器返回结果时，自动完成 ajax 函数中的代码通过将 设置为等于（公司名称）加上要返回的（公司 ID）来success填充下拉列表。同样，设置为（公司 ID）。labelvaluekeyvaluekey

当用户选择特定项目时，label应该进入DRMCompanyName文本框，value而DRMCompanyId. 然而，最终发生的事情是value两者都被放置。

我一遍又一遍地搜索我的代码，却找不到为什么label没有放在DRMCompanyName现场。

jQuery

$(function () {
    $('#DRMCompanyName').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("compSearchByName", "AgentTransmission")',
                type: 'GET',
                dataType: 'json',
                data: request,
                success: function (data) {
                    response($.map(data, function (value, key) {
                        return {
                            label: value + " " + key,
                            value: key
                        };
                    }));
                },
            });
        },
        minLength: 2,
        select: function (event, ui) {
            console.log(ui);
            $('#DRMCompanyName').val(ui.item.label);
            $('#DRMCompanyName').text(ui.item.label);

            if ($('#DRMCompanyId').text() == '') {
                $('#DRMCompanyId').val(ui.item.value);
                $('#DRMCompanyId').text(ui.item.value);
            }
        }
    });
});

ui这是上述函数中项目的示例屏幕截图select（公司名称为隐私被涂黑）。当我在自动完成下拉菜单中单击此特定项目时，200014会同时放置在DRMCompanyName和DRMCompanyId字段中。

在此处输入图像描述

剃刀标记

    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.DRMCompanyName)
        @Html.ValidationMessageFor(model => model.DRMCompanyName)
    </div>    

    <div class="M-editor-label">
        @Html.LabelFor(model => model.DRMCompanyId)
    </div>
    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.DRMCompanyId, new { maxlength = 10, title = "Start typing company name to activate DRM Company Name lookup. When DRM Company is found, select to fill in DRM Company ID and DRM Company Name fields." })
        @Html.ValidationMessageFor(model => model.DRMCompanyId)
    </div>

编辑

在遵循以下答案中的建议后，我修改了select函数，如下所示：

        select: function (event, ui) {
            console.log(tempResults[ui.item.value]);
            $('#DRMCompanyName').val(tempResults[ui.item.value]);
            $('#DRMCompanyName').text(tempResults[ui.item.value]);

            if ($('#DRMCompanyId').text() == '') {
                $('#DRMCompanyId').val(ui.item.value);
                $('#DRMCompanyId').text(ui.item.value);
            }
        }

根据console.log读数，当用户单击自动完成项时，它会访问正确的值。但是，它仍然将值放在两个文本框中。当我选择 时，我无法理解Inspect Element的是，正确的值DRMCompanyName实际上是放在 HTML 中，但是它没有出现在屏幕上，只有idor value（与 相对label）。

在此处输入图像描述

4

1 回答 1

2

您正在设置label: value + " " + key它当然会在标签中添加 id。

当您设置$('#DRMCompanyName').val(ui.item.label);时，它会将您在 中连接的内容设置$.map为该值。

一种方法是从源 ajax 调用中的数据存储一个临时结果集，以便以后访问。使用此临时集，您现在可以从中提取任何对象或键/值以供以后使用。

获取结果时，存储结果的临时列表。

var tempResults = [];

...
source: function (request, response) {
    $.ajax({
        url: '@Url.Action("compSearchByName", "AgentTransmission")',
        type: 'GET',
        dataType: 'json',
        data: request,
        success: function (data) {
            tempResults = data;

            response($.map(data, function (value, key) {
                return {
                    label: value + " " + key,
                    value: key
                };
            }));
        },
    });
}

然后，在选择时，您现在可以访问存储的数据并设置值：

select: function (event, ui) {
    event.preventDefault();
    var name = tempResults[ui.item.value].value;
    var id = tempResults[ui.item.value].key;

    $('#DRMCompanyName').val(name);
    $('#DRMCompanyName').text(name);

    if ($('#DRMCompanyId').text() == '') {
        $('#DRMCompanyId').val(id);
        $('#DRMCompanyId').text(id);
    }
}

编辑

忘记一件小事！将此添加到select:函数的开头！

event.preventDefault();

默认情况下，选择时，自动完成将使用ui.item.value填充它连接的元素。使用event.preventDefault()将防止在自动完成中调用已连接的事件处理程序。

event.preventDefault() 文档。

于 2013-06-12T18:26:57.487 回答