Why is this Javascript Error occurring in MVC Web application?

Question

Okay I'm totally new to this so I'm not going to get a lot of the terminology right, but it's an ASP.NET MVC application where a create view is supposed to have an autocomplete function on the "StudentID" text box. It doesn't work. On the console window I get an error message "Autocomplete is not a function". This is strange because the intellisense at the beginning does give me autocomplete. I don't know what I'm supposed to paste below but I put in the javascript as well as the applicable Controller code. LMK if there's anything else you need to see. Thanks in advance.

P.S. If you know a better way to do autocomplete (this is done through a class that we got the code from some website and looks more complicated than similar things I did in the past) please let me know that too.

<script>
    $("#Student_FirstName").autocomplete(
    {
            source: function (request, response)
            {
            $.ajax(
                {
                    url: "/Enrollments/GetStudents",
                    dataType: "json",
                    type: "POST",
                    data:
                    {
                        term: request.searchTerm
                    },
                    success: function (data) {
                        console.log(data);
                        response($.map(data, function (item) {
                            return {
                                label: item.Name, value: item.Name, id: item.id
                            };
                        }))
                    }
                });
            },
            minLength: 2,
            select: function (event, query)
            {
                console.log(query);
                $("#StudentID").val(query.item.id);
            }

    });

</script>

And now from later on in the Create view:

<div class="form-group">
    @Html.LabelFor(model => model.StudentID, "StudentID", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Student.FirstName, new { htmlAttributes = new {@class = "form-control"}})
        @Html.HiddenFor(model => model.StudentID)
        @Html.ValidationMessageFor(model => model.StudentID, "", new { @class = "text-danger" })
    </div>
</div>

And finally from the Controller Class:

// GET: Enrollments/Create
public ActionResult Create()
{
    ViewBag.CourseID = new SelectList(db.Courses, "CourseID", "Title");
    ViewBag.StudentID = new SelectList(db.Students, "StudentID", "LastName");
    ViewBag.InstructorID = new SelectList(db.Instructors, "ID", "FirstName");
    return View();
}

// POST: Enrollments/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for 
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "EnrollmentID,Grade,CourseID,StudentID,InstructorID")] Enrollment enrollment)
{
    if (ModelState.IsValid)
    {
        db.Enrollments.Add(enrollment);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    ViewBag.CourseID = new SelectList(db.Courses, "CourseID", "Title", enrollment.CourseID);
    ViewBag.StudentID = new SelectList(db.Students, "StudentID", "LastName", enrollment.StudentID);
    ViewBag.InstructorID = new SelectList(db.Instructors, "ID", "FirstName", enrollment.InstructorID);
    return View(enrollment);
}