Auto-Complete input field in asp.net MVC5

I'm trying to add auto-complete to input field in MVC5 project. The form located in Layout.cshtml, and i want to use autocomplete for "School" input field. so as I understand, I have made to following steps: 1. I installed jQuery UI widget via NuGet packages manager. 2. In the bottom of the layout.cshtml, I added:

@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/jquery")`

3. In bundleConfig.cshtml I added:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

And also:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",             
"~/Content/themes/base/jquery.ui.autocomplete.css",             
"~/Content/themes/base/jquery.ui.theme.css"));

4. Then, i wrote the following jQuery function:

   <script type="text/javascript">
   $(function () {
       $("#search").autocomplete({
           source: '@Url.Action("GetSchool")'
       });
   });
   </script>
   

5. And the GetSchool function in the HomeController:

   public JsonResult GetSchool(string term)
   {
       ReviewDBContext db = new ReviewDBContext();
       List<string> schoolsList;
       schoolsList = db.Schools.Where(x => x.Name.StartsWith(term)).Select(y => y.Name).ToList();
       return Json(schoolsList, JsonRequestBehavior.AllowGet);
   }
   

6. finally, i added the id of the query to the layout.cshtml page:

   <li class="searchLi"> <input type="text" class="form-control" id="search" autocomplete="on"> </li>
   

When I'm running the project, i got this error:

JavaScript runtime error: '$' is undefined

As I understood, to fix this error i need to add reference to jQuery library, so in the tags i added the following link:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

And then, I got this Error:

 Unhandled exception at line 18, column 13 in http://localhost:*****
 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'autocomplete' 

But the autocomplete function is from the jQuery UI package that i installed before.

Note 1: i got the error in internet explorer. in chrome there is not error, but the autocomplete isn't working, so i think the problem relevant for both browsers. Note 2: I'm trying to use this tutorial http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/

Maybe anyone know who to fix this problem? Thanks!

It seems you have duplicate reference of jQuery library. As per your code your view already contains jQuery reference by

@Scripts.Render("~/bundles/jquery") 

and after the error you again added the external link of jQuery. I think that error comes by some other reason.

I believe the reason was that the @Scripts.Render for jQuery and jQueryUI is not in correct order. The jQuery must be above to jQueryUI. so try this instead.

Replace below:

@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/jquery")

With:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui") 

and remove the external reference of jQuery.

Hope this helps !!