Аяксом подтянуть список из бд и сохранить?

Question

Anton Evseev @AntonEvseev

Net developer

ASP.NET

Аяксом подтянуть список из бд и сохранить?

Есть две модели

public class Contact
      {
    public int ID { get; set; }

    [Display(Name="Фамилия")]
    public string Surname { get; set; }

    [Display(Name="Имя"), Required]
    public string Name { get; set; }

    [Display(Name = "Отчество")]
    public string MiddleName { get; set; }

    [Display(Name="Email")]
    public string Email { get; set; }

    [RegularExpression("\\+380+\\d+", ErrorMessage="Введите номер в фортмате +380ХХХХХХХХХ")]
    [Display(Name = "Телефон"), MaxLength(13), Required]
    public string Phone { get; set; }

    [Display(Name = "Фото профиля")]
    public byte[] Image { get; set; }

    public string ImageMimeType { get; set; }

    public int? CompanyId { get; set; }
    public virtual Company Companies { get; set; }
}
public class Company
{
     public int Id { get; set; }
    [Display(Name="Название компании"), Required]
    public string Name { get; set; }

    [Display(Name = "Адрес")]
    public string Adress { get; set; }

    [Display(Name="Email раб.")]
    public string Email { get; set; }

    [RegularExpression("\\+380+\\d+", ErrorMessage="Введите номер в фортмате +380ХХХХХХХХХ")]
    [Display(Name = "Раб. тел."), MaxLength(13), Required]
    public string Phone { get; set; }

    [Display(Name = "Логотип компании")]
    public byte[] Image { get; set; }

    public string ImageMimeType { get; set; }

public virtual ICollection<Contact> Contacts { get; set; }

public Company()
{
    Contacts = new List<Contact>();
}
public override string ToString()
{
    return Name;
}
}
public class CRMContext : DbContext
{
    public DbSet<Contact> Contacts { get; set; }
    public DbSet<Company> Companies { get; set; }

    public CRMContext() : base("IdentityDb")
    {}
}

Вьюха

<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>

<h2>Создание контакта</h2>

@using (Html.BeginForm("Create", "Contact", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
   @Html.AntiForgeryToken()
   @Html.ValidationSummary(true)
    <fieldset>
        <legend>Добавить контакт</legend>
        <div class="editor-label">Фамилия</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Surname)
            @Html.ValidationMessageFor(model => model.Surname)
        </div>
        <div class="editor-label">Имя</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">Отчество</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MiddleName)
            @Html.ValidationMessageFor(model => model.MiddleName)
        </div>
        <div class="editor-label">Телефон</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>
        <div class="editor-label">E-mail</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div class="editor-label">Фото профиля</div>
        <div class="editor-field">
            <input type="file" name="uploadImage" />
        </div>
        <div>
            <label>Компания</label>
            <input class="form-control" id="searсhInput" />
        </div>
     <p>
          <input type="submit" value="Создать" />
    </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Вернуться к списку контактов", "Index")
</div>
<script>
     $(document).ready(function () {
        $("#searchInput").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Company/GetSearchValue",
                    dataType: "json",
                    type: "POST",
                    data: { search: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Name, value: item.Name };
                        }));
                    },

                });
            }
        });
    })
</script>

Скрипт выше не работает:

Uncaught TypeError: $(...).autocomplete is not a function
at HTMLDocument. (Create:104)

Как правильно при создании контакта реализовать в поле Компания автозаполнение из бд. При вводе текста в инпут мы должны посылать ajax-запрос и подгружать список компаний. Потом контакт сохранить в бд.
Метод для ajax на сервере реализовал :

public JsonResult GetSearchValue(string search)
        {
            List<Company> allsearch = db.Companies.Where(x => x.Name.Contains(search)).AsEnumerable().Select(x => new Company
            {
                Id = x.Id,
                Name = x.Name
            }).ToList();
            return new JsonResult { Data = allsearch, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }