Sneha K

Sneha K

  • 1.1k
  • 527
  • 190.6k

How to apply auto complete to the drop down in MVC4?

Apr 12 2016 4:12 AM
Hi I want to apply auto complete to the drop down. I will explain my issue clearly . I have two drop down in my view which is mentioned below.
 
 
 
 
 

Here i kept the two drop down in selection mode. That is i have to scroll and select the value. This method is suitable for limited no of values. But the field have more than 1000 values means it is difficult me to find the value by scrolling,searching and selecting the value. so i decided to change the drop down as auto complete drop down

My View

@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" })
@Html.Label("Contact Person", new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control", type = "text", id = "CustomerContactID" })
 
 
My J-query
<script>
$(function () {
$.ajax(
'@Url.Action("GetCustomers", "VisitorsForm")',{
type: "GET",
datatype: "Json",
success: function (data) {
$.each(data, function (index, value) {
$('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
});
}
});
});
$('#CustomerID').change(function () {
$('#CustomerContactID').empty();
$.ajax(
'@Url.Action("GetContactPersobByCustomerId", "VisitorsForm")',{
type: "POST",
datatype: "Json",
data: { CustomerID: $('#CustomerID').val() },
success: function (data) {
$('#CustomerContactID').append($('<option></option>').val('').text('Please select'));
$.each(data, function (index, value) {
$('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
});
}
});
});
Actually i kept these two drop down as cascading drop down. Now any one tell me how to do this task. Please any one give me the solution to this problem i search many articles for this task but many task is only there for text box only. so any one give me solution.
Advance Thanks.
 
 

Answers (3)