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?
tag.
– Kevin Sullivan Jul 22 '14 at 19:18