Susan Susan - 5 months ago 149
jQuery Question

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

Answer

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.

Comments