[英]How to populate extra fields with jQuery autocomplete
I am passing complex JSON data to jQuery autocomplete plugin . 我将复杂的JSON数据传递给jQuery自动完成插件 。 And it is working fine so it shows the list of
Products
. 它工作正常,因此它显示了
Products
列表。
Now I want to get somehow Price
that is already included into JSON data and when I select product from autocomlete list I would like to populate input
tag with Price
. 现在我想以某种方式获得已包含在JSON数据中的
Price
,当我从autocomlete列表中选择产品时,我想用Price
填充input
标签。
I really cannot get if it is possible to do. 如果有可能,我真的无法得到。 What I know that data is already in JSON but how to get it?
我所知道的数据已经是JSON但是如何获得它?
Any clue? 任何线索?
Here is JS for jQuery autocomplete plugin 这是JS for jQuery autocomplete插件
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);
}
});
});
}
To make clear item.LastPrice
has Price
data. 要明确
item.LastPrice
有Price
数据。
And HTML 和HTML
@Html.AutocompleteFor(x => x.ProductUID, Url.Action("AutocompleteProducts", "Requisition"), true, "Start typing Product name...", Model.Product.Name)
In your ui.item
object you should be able to find the the Price
property in there and then set the value in the select function. 在你的
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
}
Thanks to dcodesmith !!! 感谢dcodesmith !!! I am gonna mark his solution like an answer but just in case I will share my final code that is working fine now.
我会像答案一样标记他的解决方案,但以防万一我将分享我现在工作正常的最终代码。
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);
}
});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.