0

I am trying to implement AutoComplete in my MVC 5 web app with jQuery UI based on this tutorial: http://blogs.msdn.com/b/stuartleeks/archive/2012/04/23/asp-net-mvc-amp-jquery-ui-autocomplete.aspx

Here is my relevant code:

_Layout.cshtml:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/jqueryui")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

I have verified that all these load correctly.

Name.cshtml:

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

<form method="get">
    <label for="cname">Name:</label>
    <input type="text" name="cname" id="cname" />
    <input type="Submit" value="Submit" />
</form>

HomeController.cs

public ActionResult Autocomplete (string term)
    {
        var items = new[] { "John", "Bill", "Steve", "George", "Phil" };

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

When I load http://localhost:22982/Home/Name in Chrome, I see this in the console:

Uncaught TypeError: undefined is not a function Name:120
(anonymous function) Name:120
a jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1:1
h.fireWith jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1:1
k jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1:1
u jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1:1

It seems like the browser never even looks in the jQueryUI file, and an error is thrown from jQuery itself. Does anyone have any idea why this would be?

Kevin Sullivan
  • 107
  • 2
  • 6

0 Answers0