jquery - 在 MVC 中创建两个甚至更多的自动完成下拉列表

Question

我想在桌面应用程序中创建类似于组合框的自动完成文本框，所以当我输入一个字母时，它必须向我显示一些您可以选择的数据列表。存在一个名为“Purchase”的数据库，因此我创建了两个操作让控制器中的两个表获取数据并像这样显示它们：

   [HttpPost]
    public JsonResult AutoComplete(string prefix)
                {
                    var customers = (from customer in db_Purchase.tbl_Customer
                                     where customer.Customer_Name.StartsWith(prefix)
                                     select new
                                     {
                                         label = customer.Customer_Name,
                                         val = customer.Customer_Code
                                     }).ToList();
                        return Json(customers);
                }

以及与 Products 表相关的其他操作：

[HttpPost]
public JsonResult AutoComplete_Product(string term)
{
    var products = (from product in db_Purchase.tbl_Product
        where product.Proc_Name.StartsWith(term)
        select new 
        {
            lable = product.Proc_Name,
            val = product.Proc_Code
        }).ToList();
    return Json(products);
}

在视图中使用 html.beginform 我编写了我的 html 代码而不发送模型

@using (Html.BeginForm("Index", "Order", FormMethod.Post, new { @class = "form-inline" }))
    {
        <div class="form-group">
            <label for="txtCustomer">Customer Name:</label>
            <input type="text" id="txtCustomer" name="CustomerName" class="form-control" />
        </div>
        <div class="form-group">
            <input type="hidden" id="hfCustomer" name="CustomerCode" />
        </div>
    
        <div class="form-group">
            <label for="txtProduct">Product Name:</label>
            <input type="text" id="txtProduct" name="ProductName" class="form-control" />
        </div>
        <div class="form-group">
            <input type="hidden" id="hfProduct" name="ProductCode" />
        </div>

    }

之后，在两个 jquery 函数中，我填写了两个文本框，这些代码如下片段：

<script>
   $(function () {
        $("#txtCustomer").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Order/Order/AutoComplete',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data,
                            function (item) {
                                return item;
                            }));
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#hfCustomer").val(i.item.val);
            },
            minLength: 0
        }).focus(function () {
            $(this).autocomplete("search");
        });
    });
    $(function() {
        $("#txtProduct").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("AutoComplete_Product","Order")',
                    data: "{ 'term': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data,
                            function (item) {
                                return item;
                            }));
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#hfProduct").val(i.item.val);
            },
            minLength: 0
        }).focus(function () {
            $(this).autocomplete("search");
        });
    });

</script>

第一个代码，我的意思是客户代码有效，但第二个无效。它没有显示任何错误，也没有填充产品文本。像“term”、“prefix”、“val”这样的词吗？和 Actions 中的“label”在 jquery 代码中应该是相同的名称，或者它们可以有不同的名称？有人可以帮我说我的第二个 Jquery 代码有一些错误吗？

标签： jquerydrop-down-menuautocomplete