asp.net-mvc - 使用 .Net MVC : How to display the label when selected but save the value 的 JQuery UI 自动完成

Question

我已经实现了自动完成，但在选择项目后，我在文本框中遇到了标签与值的问题。当我输入邮政编码时，我会在下拉列表中看到标签:



但是当我选择一个后，而不是文本框中显示的标签，而是显示值(这是需要保存到数据库中的ID):



如何在选择标签后仍然显示标签，但是在保存表单时，它会传递该字段的 ZipCodeID？

这是我的 Controller 方法:

public JsonResult FindZipCode(string term)
    {
        VetClinicDataContext db = new VetClinicDataContext();

        var zipCodes = from c in db.ZipCodes
                       where c.ZipCodeNum.ToString().StartsWith(term)
                       select new { value = c.ZipCodeID, label = c.ZipCodeNum};

        return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
    }

这是我的标记:

<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete({
                  source: '<%= Url.Action("FindZipCode", "Customers") %>',
        });
    });
</script>

<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div>

编辑:这是我的最终工作代码:

Controller :

public JsonResult FindZipCode(string term)
    {
        VetClinicDataContext db = new VetClinicDataContext();

        var zipCodes = from c in db.ZipCodes
                       where c.ZipCodeNum.ToString().StartsWith(term)
                       select new { value = c.ZipCodeID, label = c.ZipCodeNum};

        return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
    }

和标记:

<script type="text/javascript">
    $(document).ready(function() {
        $("#ddZipCode").autocomplete({
            source: '<%= Url.Action("FindZipCode", "Customers") %>',
            select: function(event, ui) {
                var zipCodeID = parseInt(ui.item.value, 1);
                $("#ddZipCode").val(ui.item.label);
                $("#ZipCodeID").val(ui.item.value);
                return false;
            }
        });
    });
</script>

<div class="ui-widget"><input type="text" name="ddZipCode" id="ddZipCode" /></div>
<%= Html.Hidden("ZipCodeID")%>

Answer 1

没有更改您的模型以不对邮政编码使用不同的 ID...

为邮政编码 id 创建一个隐藏字段。更改选择行为，用 ID 填充隐藏字段，用标签填充可见字段。

见 The sample如何实现这一目标

你有没有考虑过如果他们自己输入会发生什么？