使用 JS 在文本框中自动完成。一切正常，但是我想在页面中添加另外 2 个具有自动完成功能的不同文本框。如果有人可以查看代码并纠正我，那将是伟大的 谢谢
<div class="form-group">
@Html.LabelFor(x => x.ProductRecord_Name)
@Html.TextBoxFor(x => x.ProductRecord_Name, new { @class = "form-control uppercase" })
@Html.HiddenFor(x => x.ProductRecord_Id)
@Html.ValidationMessageFor(x => x.ProductRecord_Id)
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var products = [
@{
bool addComma1 = false;
foreach (StockControl.Models.ProductRecord product in Model.ProductRecords)
{
if (addComma1)
{
<text> @Html.Raw(",") </text>
}
<text> @Html.Raw(string.Format("{{ value: \"{0}\", label: \"{1}\" }}", product.Id, product.Name)) </text>
addComma1 = true;
}
}
];
$("#ProductRecord_Name").autocomplete({
minLength: 0,
source: customers,
focus: function (event, ui) {
$("#ProductRecord_Name").val(ui.item.label);
return false;
},
select: function (event, ui) {
$(this).val(ui.item.label).change();
$("#ProductRecord_Id").val(ui.item.value);
return false;
}
});
</script>
这一切正常的问题是，当我尝试向 JS 添加更多代码时......不确定实际布局时，数组是否彼此相邻或单独 $(document).ready(function () 函数：（这样做看起来正确...看不到我错过了什么...
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var products = [
@{
bool addComma1 = false;
foreach (ACCS.StockControl.Models.ProductRecord product in Model.ProductRecords)
{
if (addComma1)
{
<text> @Html.Raw(",") </text>
}
<text> @Html.Raw(string.Format("{{ value: \"{0}\", label: \"{1}\" }}", product.Id, product.Name)) </text>
addComma1 = true;
}
}
];
var unitsOfSale = [
@{
bool addComma2 = false;
foreach (ACCS.StockControl.Models.UnitOfSaleRecord unit in Model.UnitOfSaleRecords)
{
if (addComma2)
{
<text> @Html.Raw(",") </text>
}
<text> @Html.Raw(string.Format("{{ value: \"{0}\", label: \"{1}\" }}", unit.Id, unit.Name)) </text>
addComma2 = true;
}
}
];
var caseSizes = [
@{
bool addComma3 = false;
foreach (ACCS.StockControl.Models.CaseSizeRecord caseSize in Model.CaseSizeRecords)
{
if (addComma3)
{
<text> @Html.Raw(",") </text>
}
<text> @Html.Raw(string.Format("{{ value: \"{0}\", label: \"{1}\" }}", caseSize.Id, caseSize.Description)) </text>
addComma3 = true;
}
}
];
$("#ProductRecord_Name").autocomplete({
minLength: 0,
source: products,
focus: function (event, ui) {
$("#ProductRecord_Name").val(ui.item.label);
return false;
},
select: function (event, ui) {
$(this).val(ui.item.label).change();
$("#ProductRecord_Id").val(ui.item.value);
return false;
}
});
$("#UnitOfSaleRecord_Name").autocomplete({
minLength: 0,
source: unitsOfSale,
focus: function (event, ui) {
$("#UnitOfSaleRecord_Name").val(ui.item.label);
return false;
},
select: function (event, ui) {
$(this).val(ui.item.label).change();
$("#UnitOfSaleRecord_Id").val(ui.item.value);
return false;
}
});
$("#CaseSize_Name").autocomplete({
minLength: 0,
source: caseSizes,
focus: function (event, ui) {
$("#CaseSize_Name").val(ui.item.label);
return false;
},
select: function (event, ui) {
$(this).val(ui.item.label).change();
$("#CaseSize_Id").val(ui.item.value);
return false;
}
});
</script>