Jquery autocomplete not working on ASP.NET MVC 5

Question

Tutorial I am following

Hi, I am implementing jquery autocomplete using this tutorial ASP.NET Tutorial Part 76 Implement autocomplete textbox functionality in mvc https://www.youtube.com/watch?v=MmBdMZJ3Jlo

Problem

When I type something in input box, autocomplete does not work

Description

I have implemented the search functionality and its working fine but i am stuck on autocomplete function of jquery. I have searched a lot on google and stack overflow previous questions, i tried everything but couldn't solve my problem.

Code

Here is my code of autocomplete ( i have not included code of searching )

Index.cshtml

<link href="~/Content/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script>

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

</script>

 @using(@Html.BeginForm())
 {
        <br />
        <b>AirPort Code:</b>
        @Html.TextBox("SearchTerm", null, new { id="txtSearch"})
        <input type="submit" value="Search" />     
 }

and my controller code

HomeController.cs

public JsonResult GetAirports(string term)
{
            traveloticketEntities db = new traveloticketEntities();
            List<String> Airports = new List<String>();
            Airports = db.IataAirportCodes.Where(x => x.code.StartsWith(term)).Select(y=>y.code).ToList();
            return Json(Airports, JsonRequestBehavior.AllowGet);

}

@mason sorry but i dont know what is client side console. But I tried to debug it manually and i think autocomplete function is not being called when i type something in textbox. — Junaid
– Junaid, Commented Jul 6, 2015 at 0:08
Use your browser's developer tools (usually F12 on your keyboard). Look for the console or JavaScript tab. Look for any errors there. — mason
– mason, Commented Jul 6, 2015 at 0:16
@Junaid Did you make sure your page has a proper reference to the jQuery libraries? — mason
– mason, Commented Jul 6, 2015 at 0:58
You're referencing both jquery-ui.js and jquery-ui.min.j. Don't do that. Reference the unminified one during development, and the minified one on production. — mason
– mason, Commented Jul 6, 2015 at 1:10

Junaid · Accepted Answer · 2015-07-06 02:07:55Z

3

I got the solution. Thanks a lot @mason for your help. I checked my code on client side console (google chrome console using F12) and there i found out that _Layout.cshtml were adding other jQuery libraries at the end of my index.cshtml file, which were overwriting my libraries in index.cshtml. So i removed this code from _Layout.css

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

and placed my jQuery libraries in Index.cshtml in the following order

<script src="~/Scripts/external/jquery/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
<script src="~/Scripts/myScript.js" type="text/javascript"></script>

answered Jul 6, 2015 at 2:07

Junaid

6391 gold badge11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roland Wales · Accepted Answer · 2016-04-21 14:58:17Z

1

I'm not sure which version of Visual Studio you are using. In 2013, I didn't have any problem with jquery autocomplete. However, in 2015, they didn't include the jquery ui scripts. I had to add it through nuget, then add it to bundleConfig.cs before it worked.

My scripts section includes the following: @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/jqueryui")

Why didn't Microsoft include the jquery ui in Visual Studio 2015? I'd love to know the answer to this.

answered Apr 21, 2016 at 14:58

Roland Wales

731 silver badge8 bronze badges

Collectives™ on Stack Overflow

Jquery autocomplete not working on ASP.NET MVC 5

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related