Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

enter image description here

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.

enter image description here

My view Code

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

My jquery Code

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

                });
               }
             });            
           });

My Controller Code to get Customers and load in the field

  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.

The Code which i have tried

My View Code

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

My Jquery Code

  <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>

But this code is not working

Advance Thanks..

like image 832
Susan Avatar asked Jun 02 '16 07:06

Susan


1 Answers

Kindly see code below:

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

CODE

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

Sample screenshot

Img 1. Shows the autocomplete dropdown Img 2. Shows the selected Customer Name and the corresponding Id added to the CustomerID hidden field.

like image 162
denchu Avatar answered Oct 16 '22 05:10

denchu