JQuery UI Autocomplete выбирает значение вместо метки

Question

Это моя кодировка

$("#txtBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("Get", "Ctrl")',
                        dataType: 'json',
                        data: "{ 'mode': 'associate','prefix': '" + request.term + "' }",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            var transformed = $.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Id
                                };
                            });
                            response(transformed);
                        },
                        error: function() {
                            alert('error');
                        },
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    console.log('ui.item.label', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                },
                focus: function (event, ui) {
                    console.log('ui.item.label - focus', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                }
            });
        });

Я получаю Name и Id от контроллера c # как Json. Я хочу, чтобы в текстовом поле автозаполнения отображалось Имя, и при отправке его обратно на сервер при сохранении я хотел отправить Идентификатор имени. Но теперь, когда я набираю имя и выбираю имя из списка предложений. Идентификатор отображается в текстовом поле вместо имени. Где я делаю ошибку. Кто-нибудь может направить меня в этом.

Answer 1

Я бы посоветовал вам оставить два <input /> один тип = текст, а другой тип = скрытым. Вы можете инициализировать автозаполнение для type = text и установить значение в type = hidden, а на сервере вы можете получить доступ к значению type hidden.

например,

<input type="text" id="txtBox" name="label" />
<input type="hidden" id="valBox" name="value" />

$("#txtBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("Get", "Ctrl")',
                        dataType: 'json',
                        data: "{ 'mode': 'associate','prefix': '" + request.term + "' }",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            var transformed = $.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Id
                                };
                            });
                            response(transformed);
                        },
                        error: function() {
                            alert('error');
                        },
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    console.log('ui.item.label', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                    $('#valBox').val(ui.item.value);
                },
                focus: function (event, ui) {
                    console.log('ui.item.label - focus', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                }
            });
        });

В вашем контроллереВы можете получить доступ к обоим значениям Request ["label"], Request ["value"]