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

【问题标题】：How to populate extra fields with jQuery autocomplete如何使用 jQuery 自动完成填充额外的字段
【发布时间】：2014-02-04 11:06:52
【问题描述】：

我将复杂的 JSON 数据传递给 jQuery 自动完成插件。它工作正常很好，所以它显示了Products 的列表。

现在我想以某种方式获得已包含在 JSON 数据中的 Price，当我从 autocomlete 列表中选择产品时，我想用 Price 填充 input 标记。

如果可以，我真的无法做到。我知道数据已经在 JSON 中了，但是如何获取呢？

有什么线索吗？

这里是用于 jQuery 自动完成插件的 JS

 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 asp.net-mvc json autocomplete jquery-autocomplete

【解决方案1】：

在您的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
}

【讨论】：

谢谢你，兄弟！上帝保佑你！
你也是兄弟！ @ClarkKent

【解决方案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);
                }
            });
        });
    }

【讨论】：