1

我使用jquery ui 来自动完成文本框值。

我创建了数组并将 name 和 id 绑定到 auto-complete 的源。最初我遇到的问题是如果用户没有从列表中选择，那么它应该对此采取一些措施。然后我搜索了上述问题，然后我知道了使用ui auto-complete 的更改事件的解决方案。但现在它导致了一个新问题，即当我从列表中选择项目时，它会在文本框中显示 id ，而当我失去焦点时，它只会显示 name。它不应该向我为隐藏字段设置的用户显示 id。

如何避免这种情况？

我使用了以下代码-

来自网页的代码是 -

<div class="editor-field">

          @if (Model.ReportsTo != null)
          {
               @Html.TextBox("ReportsTo_FullName", Model.ReportsTo.FullName)
          }
          else
          {
                @Html.TextBox("ReportsTo_FullName", String.Empty, new { @id = "ReportsTo_FullName" })
          }
            @Html.HiddenFor(model => model.ReportsToId, "ReportsToId")
            @Html.ValidationMessageFor(model => model.ReportsToId)

</div>

来自脚本的代码 -

$(function () {
    $("#ReportsTo_FullName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Employee/AutocompleteSuggestions",
                type: "POST",
                dataType: "json",
                data:
                    {
                        term: request.term,
                        moduleName: "Employee"
                    },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.FullName, value: item.Id }
                    }
                    ))
                }
            })
        },
        minLength: 1,
        focus: function (event, ui) {
            $("#ReportsTo_FullName").val(ui.item.label);
            return false;
        },
        change: function (event, ui) {
            if (ui.item != null) {
                $("#ReportsTo_FullName").val(ui.item.label);
                $("#ReportsToId").val(ui.item.value);
                return false;
            }
            else {
                $("#ReportsTo_FullName").css("color", "red");
            }
        }
    });
});
4

0 回答 0