我想制作一个包含产品列表的表格。
当用户开始输入产品名称时,自动完成功能应按名称(第一个数组元素)显示可用选项。
当用户选择产品时,第二个表单控件应显示价格(第二个数组元素)。
这是我的代码:
HTML:
Product name:
<textarea class="form-control" id="product_name" name="product_name" rows="1" cols="70" placeholder="" type="text" required></textarea>
<br>
Product price:
<textarea class="form-control" id="product_price" name="product_price" rows="1" cols="70" placeholder="" type="text" required>
</textarea>
JS:
$(function() {
var tagi = [
["product_name_1", "10"],
["produc_name_2", "20"],
["produc_name_3", "20"],
];
$( "#product_name, #product_price" ).autocomplete({
source: tagi[0,1]
});
});
...和 js fiddle :http://jsfiddle.net/dNLQa/159/
我正在尝试让它工作,但我被卡住了。
附言。该数组将由 PHP 生成,因此如果需要采用不同的格式,我可以轻松完成。
最佳答案
希望我正确理解了您的问题。如果是这样,如果用户从自动完成中选择了一个产品,您就可以搜索该产品。
fork fiddle :http://jsfiddle.net/vnxa2b09/4/
$(function () {
function setPriceByProduct(prod, values) {
for (var i = 0, len = values.length; i < len; i++) {
if (values[i][0] == prod) {
$('#product_price').val(values[i][1]);
break;
}
}
}
var tagi = [
["product_name_1", "10"],
["produc_name_2", "20"],
["produc_name_3", "20"],
];
$("#product_name, #product_price").autocomplete({
source: tagi.map(function(val){return val[0]}),
select: function (event, ui) {
setPriceByProduct(ui.item.value, tagi);
}
});
});
关于javascript - 二维数组和自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47225310/