Автозаполнение пользовательского интерфейса JQuery с .Net MVC: как отобразить метку при выборе, но сохранить значение

Я реализовал автозаполнение, у меня возникли проблемы с меткой и значением в текстовом поле после выбора элемента . Когда я ввожу почтовый индекс, я вижу метку в раскрывающемся списке:

, но после того, как я выберу ее, вместо метки, отображаемой в текстовом поле, значение (которое является идентификатором, который необходимо сохранить в базе данных ) отображается:

Как мне по-прежнему показывать метку после ее выбора, но затем, когда форма сохраняется, она передает ZipCodeID для поля?

Здесь ' s мой метод контроллера:

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>

EDIT: вот мой последний рабочий код:

Контроллер:

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")%>
5
задан Community 8 February 2017 в 14:30
поделиться