JQuery UI Автозаполнение с помощью .Net MVC: Как отображать метку при выборе, но сохранять значение

Question

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

but after I select one, instead of the label showing in the text box, the value (which is the ID that needs to be saved to the database) is displayed:

How do I still show the label after it's selected, but then when the form is saved, it passes the ZipCodeID for the field?

Here's my Controller method:

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);
    }

And here's my markup:

    $ (документ) .ready (function () {
        $ ( "# ZipCodeID"). Автозаполнения ({
                  source: '<% = Url.Action ("FindZipCode", "Customers")%>',
        });
    });


  

РЕДАКТИРОВАТЬ: Вот мой последний рабочий код:

Контроллер:

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

За исключением изменения вашей модели, чтобы не использовать другой идентификатор для почтовых индексов ...

Создать скрытое поле для идентификатора почтового индекса. Измените поведение выбора, чтобы заполнить скрытое поле идентификатором, а видимое - меткой.

См. Пример , как этого добиться

Рассматривали ли вы, что произойдет, если они введут свои собственные символы?

Answer 2

Если вы добавите следующие строки, он будет отображать метку, а НЕ идентификатор (который, я бы подумал, должен быть по умолчанию, но эй).

select: function (event, ui) {
     event.preventDefault();
     event.target.innerText = ui.item.label;
}