Автозаполнение не отображается, ASP.NET MVC

Question

У меня есть одно поле зрения, это поле текстового поля. Но я бы хотел изменить это поле на выпадающий список автозаполнения.

Ниже мое мнение:

@Html.TextBoxFor(model => model.SearchFilterPaymentCode, new { @class = "form-control", @id = "searchInput1" })
@Html.HiddenFor(model => model.ID)

<script>
    $(document).ready(function () {
      $("#searchInput1").autocomplete({
         source: function (request, response) {
            $.ajax({
               url: '@Url.Action("getJenisPembayaran", "Payment1")',
               dataType: "json",
                 data: {
                      term: request.term
                 },
                 success: function (data) {
                    response($.map(data, function (val, item) {
                      return {
                          label: val.Name,
                          value: val.Name,
                          ID: val.ID
                      }
                    }))
                 }
            })
         },
         select: function (event, ui) {
            $("#ID").val(ui.item.ID);
            $("#SearchFilterPaymentCode").val(ui.item.label);
         }
      });
    })
</script>

и ниже мой контроллер

public JsonResult getJenisPembayaran(string term)
{
    var objCustomerlist = db.ParamJenisPembayarans.Where(x => x.Name.ToUpper()
                                .Contains(term.ToUpper()))
                                .Select(x => new ParamJenisPembayaranViewModel
                                {
                                    ID = x.ID,
                                    JenisPembayaran = x.Name
                                }).Distinct().ToList();
    return Json(objCustomerlist, JsonRequestBehavior.AllowGet);
}

Когда я отлаживаю контроллер и заполняю текстовое поле несколькими словами, я получаю некоторые данные из базы данных, это означает, что контроллер работает хорошо, но данные не отображаются в представлении. Что не так с моим кодом?