Asp.net mvc5 как преобразовать текстовое поле в выпадающее меню ?

---

Это рабочий код , но я хочу сделать вот что: как я могу изменить текстовое поле @Html.TextBoxFor(model => model.CategoryID, new { @class = "form-control" })
в dropdowncolumn , со всеми теми же функциональными возможностями ,я имею в виду такую опцию автозаполнения :

@Html.TextBoxFor(model => model.CategoryID,   new { @class = "form-control" })
@section scripts{
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $(function () {
            $("#CategoryID").autocomplete({
                source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("AutoComplete")',
                    datatype: "json",
                    data: {
                        term: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (val, item) {
                            return {
                                label: val.Name + "     |       " + val.Description,
                                value: val.Name,
                                CategoryId: val.ID,
                                 Description: val.Description
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $.get("/Home/GetSProductList", { CategoryID: ui.item.CategoryId }, function (data) {
                    $("#ProductID").empty();
                    $.each(data, function (index, row) {
                        $("#ProductID").append("<option value='" + row.ProductID + "'>" + row.ProductName + "</option>")
                    });
 
                });
 
                $.get("/Home/GetOrderList", { ProductID: $("#ProductID").val() }, function (data) {
                    $("#OrderID").empty();
                    $.each(data, function (index, row) {
                        $("#OrderID").append("<option value='" + row.OrderID + "'>" + row.OrderID + "</option>")
                    });
 
                });
 
 
            }
 
 
 
            })
        })
    </script>
}


public ActionResult Index()
      {
 
 
          List<Category> CategoryList = db.Categories.ToList();
 
 
          ViewBag.CategoryList = new SelectList(CategoryList , "CategoryID" , "CategoryName");
          return View();
      }


public ActionResult AutoComplete(string term)
      {
          if (!String.IsNullOrEmpty(term))
          {
              var list = db.Categories.Where(c => c.CategoryName.ToUpper().Contains(term.ToUpper())).Select(c => new { Name = c.CategoryName, ID = c.CategoryID , Description= c.Description})
                  .ToList();
              return Json(list, JsonRequestBehavior.AllowGet);
          }
          else
          {
              var list = db.Categories.Select(c => new { Name = c.CategoryName, ID = c.CategoryID, Description = c.Description })
                  .ToList();
              return Json(list, JsonRequestBehavior.AllowGet);
          }
      }

Что я уже пробовал:

я только что объяснил эту проблему выше.

---