Ajax to pull up a list from the database and save?

Question

ASP.NET

There are two models

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

View

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

The script above doesn't work:

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

How to correctly implement autocomplete from the database in the Company field when creating a contact. When entering text into the input, we must send an ajax request and load the list of companies. Then save the contact to the database.
Method for ajax on the server implemented:

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 };
        }

Answer 1

Apparently you didn't include jquery-ui.