Oi eu tenho um campo na minha opinião. Esse campo é Cliente, é um campo suspenso. Em que tenho manter suspenso como opção de seleção para selecionar o valor. Mas eu gosto de alterar esse campo como menu suspenso Preenchimento automático.

Na imagem acima, tenho o campo customerName como campo suspenso, mas mantenho-o na pesquisa e selecione a opção. Mas agora eu gosto de mudar isso para o preenchimento automático suspenso, como é mencionado na imagem abaixo.

Minha visão Código

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

Meu 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>');

                });
               }
             });            
           });

Meu código de controlador para obter clientes e carregar no campo

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

Eu tentei explicar meu problema. Qualquer um ajuda a resolver esse problema. Eu tentei de várias maneiras, mas não está funcionando. Portanto, qualquer um entende o meu problema e fornece algumas soluções ou sugestões.

O código que eu tentei

Código My View

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

Mas esse código não está funcionando

Agradecemos antecipadamente ..