jquery autocomplete not working with razor page

jquery autocomplete not working with razor page

I am new to asp.net and razor. I am trying to get the field called product to have autocomplete with results from the database.

I have created autocomplete.cs model and the ticket controller was already in project so i just added the action. Then the new.cshtml I had added the code.  I am lost on what is wrong. Any help is appreciated.

The issue is when i go to new.cshtml page and jquery auto compete does not work on textbox. Other jquery which i am using to hide other fields does work. I added this to header to get it to work as far as putting formatting to the text box <script src="../../js/jquery.autocomplete.js" type="text/javascript"></script>. No errors in console and still does not work.

Here is the auto complete.cs

    using System;
    using System.Web;
    using System.Linq;
    using System.Collections.Generic;
    using System.Data.SqlClient;
    using System.Configuration;

    namespace HelpDesk.Models
    {
    public class PartNumber
    {
        public string[] GetPartNumber()
        {
            List<string> partnumber = new List<string>();
            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["RASConnectionString"].ConnectionString))
            {
                con.Open();
                SqlCommand comm = new SqlCommand("select * from pltjones.dbo.inv_master", con);
                SqlDataReader reader = comm.ExecuteReader();

                while (reader.Read())
                {
                    partnumber.Add(reader["part_no"].ToString());
                }
            }
            return partnumber.ToArray();
        }
    }




























   
Then here is the ticket controller that was already made in this application. I am doing a snipplet of what i added.


      public ActionResult Autocomplete(string term)
        {
            var items = new PartNumber().GetPartNumber();

            var filteredItems = items.Where(
                item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0
                );
            return Json(filteredItems, JsonRequestBehavior.AllowGet);
        }









Here is the razor view new.cshtml

     <script type="text/javascript">
       $(document).ready(function () {
           $('#product')
        .each(function () {
            $(this).autocomplete({
                source: '@Url.Action("Autocomplete")'
            });
        });
       });

</script>

     <tr id="trEmail">
        <td colspan="2">
            <label for="product">Enter product: </label>
            <input type="text" name="product" id="product" />
    </tr>