Question

当用户开始在DRMCompanyName输入文本框中输入内容时，自动完成功能会同时显示公司名称和公司ID。当用户点击某个选项时，公司名称和ID将被放入DRMCompanyName文本框中，而ID位于下面的DRMCompanyId文本框中。

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

当用户选择特定项目时，key应该位于label文本框和DRMCompanyName中的value。然而，最终发生的事情是DRMCompanyId被放置在两者中。

我一遍又一遍地搜索我的代码，但无法找出为什么value没有放在label字段中。

的jQuery

DRMCompanyName

以下是上述$(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字段中。

enter image description here

Razor Markup

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的正确值实际上是放在HTML中，但它不会出现在屏幕上，只有DRMCompanyName或id（而不是value）。

enter image description here

Answer 1

您正在设置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() documentation.

选择文本框中的jQuery自动填充错误项目

1 个答案: