MVC5中的自动完成下拉列表? [英] Autocomplete dropdown in MVC5?

问题描述

我认为有一个领域.该字段是客户，它是一个下拉字段.在那我保留下拉菜单作为选择选项来选择值.但是我喜欢将该字段更改为自动完成"下拉列表.

Hi i have one field in my view. That field is Customer it is a dropdown field. In that i have keep dropdown as select option to select the value. But i like to change that field as Autocomplete dropdown.

在上图中，我将customerName字段作为下拉字段，但是我通过搜索和选择选项来保留它.但是现在我想将其更改为自动完成下拉菜单，如下图所示.

In the above image I have customerName field as dropdown field but i keep it by search and select option. But now i like to change this to autocomplete dropdown like which is mention the in the below image.

我的查看代码

 @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('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');

                });
               }
             });            
           });

我的控制器代码以获取客户并在字段中加载

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

我试图解释我的问题.任何人都可以解决此问题.我尝试了很多方法，但是没有用.因此，任何人都可以理解我的问题，并提出解决方案或建议.

I tried to explain my issue. Any one help to resolve this issue. I tried many ways but its not working. So any one understand my issue and give some solution or suggesstions.

我尝试过的代码

我的查看代码

 @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

            @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);
    }

示例屏幕截图

这篇关于MVC5中的自动完成下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！