Question

我将复杂的JSON数据传递给 jQuery自动完成插件。它正在运行，因此它会显示Products的列表。

enter image description here

现在我想以某种方式{J}数据已经包含在JSON数据中，当我从 autocomlete list 中选择产品时，我想用{{填充Price标记1}}。

如果有可能，我真的无法得到。我所知道的数据已经是JSON但是如何获得它？

有任何线索吗？

这是JS for jQuery autocomplete插件

input

要明确Price有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); } }); }); }个数据。

HTML

item.LastPrice

Answer 1

在ui.item对象中，您应该能够找到Price属性，然后在select函数中设置值。

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
}

Answer 2

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

如何使用jQuery自动完成填充额外字段

2 个答案: