C# MVC5中的自动完成下拉列表？

嗨，我有一个领域在我的看法。该字段是Customer，它是一个下拉字段。在这种情况下，我保留下拉菜单作为选择选项来选择值。但我喜欢将该字段更改为“自动完成”下拉列表

在上图中，我将customerName字段作为下拉字段，但我通过搜索和选择选项保留它。但是现在我想把它改成自动完成下拉列表，就像下图中提到的那样

我的视图代码

我的jquery代码

  <script type="text/javascript">
    $(document).ready(function () {
        debugger;
        $("#CustomerID").autocomplete({
            source: function (request, response) {
                $.ajax(
                     '@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })', {
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return
                            { label=item.CustomerID, value= item.DisplayName
                            };
                        }))

                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    })
</script>

我试图解释我的问题。任何人都可以帮助解决这个问题。我尝试了很多方法，但都不管用。因此，任何人都理解我的问题，并给出一些解决方案或建议

我尝试过的代码

我的视图代码

 @Html.Label("Customer Name", new { @class = "control-label" })
 @Html.TextBoxFor(Model=>Model.CustomerID)

我的Jquery代码

  <script type="text/javascript">
    $(document).ready(function () {
        debugger;
        $("#CustomerID").autocomplete({
            source: function (request, response) {
                $.ajax(
                     '@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })', {
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return
                            { label=item.CustomerID, value= item.DisplayName
                            };
                        }))

                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    })
</script>

但是这个代码不起作用

提前感谢..

请参见下面的代码：

HTML

JS

代码

示例屏幕截图

---

您现在的代码有什么问题？我将发布我尝试过的代码，但它不起作用。现在检查我尝试过的代码stephenHi@Susan如果我回答了您的问题，请您标记我的答案。谢谢你，我尝试了第二种方法，因为你说它没有显示任何错误。它点击json GetVisite客户并计算我在文本框中键入的值，但在计算后，它没有在视图中显示计算出的值，以选择与上图中提到的相同的选项。。Hi@Susan。我更新了我的答案并添加了截图，这样你就可以直观地看到结果了。我所做的是，从JsonResult返回2个数据，CustomerID和CustomerName。在上面的示例中，一旦从“自动完成”下拉列表中选择了适当的客户名称，CustomerID隐藏字段将填充正确的ID，我在第二张图像上显示了该ID。ok Denchu让我尝试并检查，如果我遇到问题，我将通知youBtw，为什么需要添加Areas参数？您还需要它作为JsonResult方法中客户列表的过滤器吗？Denchu，即我们在单个应用程序中组合了两个项目我的项目将在区域下销售。我的表格都在销售区域下，所以只有我这样使用。

 @Html.Label("Customer Name", new { @class = "control-label" })
 @Html.TextBoxFor(Model=>Model.CustomerID)

  <script type="text/javascript">
    $(document).ready(function () {
        debugger;
        $("#CustomerID").autocomplete({
            source: function (request, response) {
                $.ajax(
                     '@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })', {
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return
                            { label=item.CustomerID, value= item.DisplayName
                            };
                        }))

                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    })
</script>

            @Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" })
            @Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control"})
            @Html.HiddenFor(model => Model.CustomerID)

$(document).ready(function () {
    $("#CustomerName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetVisitCustomer", "Home")',
                datatype: "json",
                data: {
                    Areas: 'Sales',
                    term: request.term
                },
                success: function (data) {
                    response($.map(data, function (val, item) {
                        return {
                            label: val.Name,
                            value: val.Name,
                            customerId: val.ID
                        }
                    }))
                }
            })
        },
        select: function (event, ui) {
            $("#CustomerID").val(ui.item.customerId);
        }
    });
});

    public JsonResult GetVisitCustomer(string Areas, string term = "")
    {
        var objCustomerlist = db.Customers.Where(c => c.IsDeleted == false)
                        .Where(c => c.CustomerName.ToUpper()
                        .Contains(term.ToUpper()))
                        .Select(c => new { Name = c.CustomerName, ID = c.CustomerID })
                        .Distinct().ToList();
        return Json(objCustomerlist, JsonRequestBehavior.AllowGet);
    }