title: Auto-Complete input field in asp.net MVC5
body: <p>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: </p>
  
  <pre><code>@Scripts.Render("~/bundles/jqueryui") 
  @Scripts.Render("~/bundles/jquery")`
  </code></pre>
  
  <p>3. In bundleConfig.cshtml I added:</p>
  
  <pre><code>bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  "~/Scripts/jquery-{version}.js"));
  </code></pre>
  
  <p>And also:</p>
  
  <pre><code>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"));
  </code></pre>
  
  <ol start="4">
  <li><p>Then, i wrote the following jQuery function:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
      $("#search").autocomplete({
          source: '@Url.Action("GetSchool")'
      });
  });
  &lt;/script&gt;
  </code></pre></li>
  <li><p>And the GetSchool function in the HomeController:</p>
  
  <pre><code>public JsonResult GetSchool(string term)
  {
      ReviewDBContext db = new ReviewDBContext();
      List&lt;string&gt; schoolsList;
      schoolsList = db.Schools.Where(x =&gt; x.Name.StartsWith(term)).Select(y =&gt; y.Name).ToList();
      return Json(schoolsList, JsonRequestBehavior.AllowGet);
  }
  </code></pre></li>
  <li><p>finally, i added the id of the query to the layout.cshtml page:</p>
  
  <pre><code>&lt;li class="searchLi"&gt; &lt;input type="text" class="form-control" id="search" autocomplete="on"&gt; &lt;/li&gt;
  </code></pre></li>
  </ol>
  
  <p>When I'm running the project, i got this error:</p>
  
  <pre><code>JavaScript runtime error: '$' is undefined
  </code></pre>
  
  <p>As I understood, to fix this error i need to add reference to jQuery library, so in the  tags i added the following link:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And then, I got this Error:</p>
  
  <pre><code> Unhandled exception at line 18, column 13 in http://localhost:*****
   0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'autocomplete' 
  </code></pre>
  
  <p>But the autocomplete function is from the jQuery UI package that i installed before. </p>
  
  <p>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 <a href="http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/" rel="nofollow">http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/</a></p>
  
  <p>Maybe anyone know who to fix this problem? 
  Thanks!</p>