Hola, tengo un campo en mi opinión. Ese campo es Cliente, es un campo desplegable. En eso tengo mantener desplegable como opción de selección para seleccionar el valor. Pero me gusta cambiar ese campo como menú desplegable Autocompletar.

En la imagen de arriba tengo el campo customerName como campo desplegable pero lo mantengo mediante la búsqueda y selecciono la opción. Pero ahora me gusta cambiar esto para completar automáticamente el menú desplegable, como se menciona en la imagen a continuación.

Mi código de vista

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

Mi código 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>');

                });
               }
             });            
           });

Mi código de controlador para obtener clientes y cargar en el campo

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

Traté de explicar mi problema. Cualquiera ayuda a resolver este problema. Lo intenté de muchas maneras pero no funciona. Entonces, cualquiera entiende mi problema y da alguna solución o sugerencia.

El código que probé

Mi código de vista

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

Pero este código no funciona.

Gracias de antemano ..