Autocomplete Dropdown in MVC5?

Hi, ich habe ein Feld in meiner Ansicht. Dieses Feld ist Kunde, es ist ein Dropdown-Feld. In diesem habe ich Dropdown als Auswahloption behalten, um den Wert auszuwählen. Aber ich möchte dieses Feld als Autocomplete Dropdown ändern.

Im obigen Bild habe ich das Feld Kundenname als Dropdown-Feld, behalte es aber bei, indem ich eine Option suche und auswähle. Aber jetzt ändere ich dies gerne in ein Autocomplete-Dropdown, wie im Bild unten angegeben.

Meine Ansicht 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" })

Meine Abfrage 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>');

                });
               }
             });            
           });

Mein Controller-Code, um Kunden zu erhalten und in das Feld zu laden

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

Ich habe versucht, mein Problem zu erklären. Irgendeine Hilfe, um dieses Problem zu beheben. Ich habe viele Möglichkeiten ausprobiert, aber es funktioniert nicht. Also versteht irgendjemand mein Problem und gibt eine Lösung oder Vorschläge.

Der Code den ich ausprobiert habe

Mein Code anzeigen

 @Html.Label("Customer Name", new { @class = "control-label" })
 @Html.TextBoxFor(Model=>Model.CustomerID)

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

Aber dieser Code funktioniert nicht

Advance Danke ..