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

嗨我在我看来有一个字段。 该字段是客户，它是一个下拉字段。 在那里我保持下拉选择选项以选择值。 但我想将该字段更改为自动完成下拉列表。

在上面的图像中，我将customerName字段作为下拉字段，但我通过搜索和选择选项保留它。 但现在我想将其更改为自动完成下拉列表，如下图所示。

我的观点代码

@Html.Label("Customer Name", new { @class = "control-label" }) @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" }) 

我的jquery代码

  $(function () { debugger; $.ajax( '@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })',{ type: "GET", datatype: "Json", success: function (data) { $.each(data, function (index, value) { $('#CustomerID').append('' + value.DisplayName + ''); }); } }); }); 

我的控制器代码，以便在现场获得客户和负载

  public JsonResult GetVisitCustomer() { var objCustomerlist = (from c in db.Customers where c.IsDeleted== false select c).ToList(); return Json( objCustomerlist,JsonRequestBehavior.AllowGet); } 

我试图解释我的问题。 任何人都有助于解决此问题。 我尝试了很多方法，但它不起作用。 所以任何人都能理解我的问题并给出一些解决方案或建议。

我试过的守则

我的观点代码

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

我的Jquery代码

   $(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: "" } }); })  

但是这段代码不起作用

提前谢谢..

Answer 1

请看下面的代码：

HTML

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

JS

 $(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); } 

截图示例