0

使用 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>
4

1 回答 1

1

您是否使用 firebug（或其他 Web 开发工具）逐步调试该代码？检查这些数组的内容。

您是否显示所有相关代码？

您指定customers为来源，$("#ProductRecord_Name")但我只看到一个var products.

于 2013-11-08T10:15:45.943 回答