Как заполнить дополнительные поля с помощью автозаполнения jQuery

Я передаю сложные данные JSON в плагин автозаполнения jQuery. И он работает нормально, поэтому показывает список Products.

введите описание изображения здесь

Теперь я хочу каким-то образом получить Price, который уже включен в данные JSON, и когда я выбираю продукт из списка автозаполнения, я хочу заполнить тег input с помощью Price.

Я действительно не могу получить, если это возможно. Насколько я знаю, данные уже находятся в формате JSON, но как их получить?

Есть подсказка?

Вот JS для плагина автозаполнения jQuery

 function CreateAutocomplete() {

        var inputsToProcess = $('[data-autocomplete]').each(function (index, element) {
            var requestUrl = $(element).attr('data-action');

            $(element).autocomplete({
                minLength: 1,
                source: function (request, response) {
                    $.ajax({
                        url: requestUrl,
                        dataType: "json",
                        data: { query: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Name,
                                    realValue: item.UID                                   
                                };
                            }));
                        },
                    });
                },
                select: function (event, ui) {

                    var hiddenFieldName = $(this).attr('data-value-name');
                    $('#' + hiddenFieldName).val(ui.item.UID);
                }
            });
        });
    }

Чтобы прояснить, у item.LastPrice есть Price данные.

И HTML

   @Html.AutocompleteFor(x => x.ProductUID, Url.Action("AutocompleteProducts", "Requisition"), true, "Start typing Product name...", Model.Product.Name)

javascript json autocomplete asp.net-mvc jquery-autocomplete
person DmitryBoyko    schedule 15.01.2014    source источник

Ответы (2)


arrow_upward
5
arrow_downward

В вашем объекте ui.item вы должны найти там свойство Price, а затем установить значение в функции выбора.

success: function (data) {
    response($.map(data, function (item) {
        return {
            label: item.Name,
            value: item.Name,
            realValue: item.UID,
            price: item.LastPrice // you might need to return the LastPrice here if it's not available in the ui object in the select function
        };
    }));
},
..

select: function (event, ui) {
   var hiddenFieldName = $(this).attr('data-value-name'),
       unitPriceEl = $('#price');
   $('#' + hiddenFieldName).val(ui.item.UID);
   unitPriceEl.val(ui.item.LastPrice); //set the price here
}
person dcodesmith    schedule 15.01.2014
comment
Спасибо, брат! Будьте здоровы! - person DmitryBoyko; 15.01.2014
comment
И ты тоже братан! @Кларк Кент - person dcodesmith; 16.01.2014

arrow_upward
0
arrow_downward

Спасибо dcodesmith !!! Я отмечу его решение как ответ, но на всякий случай поделюсь своим окончательным кодом, который сейчас работает нормально.

function CreateAutocomplete() {

        var inputsToProcess = $('[data-autocomplete]').each(function (index, element) {
            var requestUrl = $(element).attr('data-action');

            $(element).autocomplete({
                minLength: 1,
                source: function (request, response) {
                    $.ajax({
                        url: requestUrl,
                        dataType: "json",
                        data: { query: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Name,
                                    realValue: item.UID,
                                    lastPrice: item.LastPrice
                                };
                            }));
                        },
                    });
                },
                select: function (event, ui) {

                    var hiddenFieldName = $(this).attr('data-value-name');
                    $('#' + hiddenFieldName).val(ui.item.UID);

                    var unitPriceEl = $('#UnitPrice');
                    unitPriceEl.val(ui.item.lastPrice);
                    console.log(ui.item.lastPrice);
                }
            });
        });
    }
person DmitryBoyko    schedule 15.01.2014