Autocomplete dropdown in MVC5?

Question

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.

 

 

 

 

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.

 

 

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

 

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