jQuery UI autocomplete is not a function?

Question

I'm using autocomplete in a MVC application but it won't autocomplete cause it can't find the function. I did however include the jquery-ui like this:

<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title Smoelenboek</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/Scripts/jquery-2.1.1.js")
        @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
        @Scripts.Render("~/Scripts/jquery-ui-1.11.2.min.js")
</head>

however when i run the code like this:

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

it won't get to the method i've defined there here's the code for that method:

[HttpPost]
        public ActionResult Autocomplete(string term)
        {
            var items = new[] { "Apple", "Pear", "Banana", "Pineapple", "Peach" };

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

it's just testdata but i don't get why it won't work. Perhaps duplicate imports or something?

it seems my problem was that i didn't add the bundle at the right place it had to be in the body not in the head. but thank you for your answer sorry for my late reply — Marijn
– Marijn, Commented Dec 15, 2014 at 7:54

Craiten · Accepted Answer · 2016-06-30 10:41:21Z

A bit late but maybe some will jelp this solution:

I figured out that the master page has a script manager which referes to the the

jquery.js

in

Scripts/external/jquery/jquery.js

This will lead to that one of the jquery variables becomes overwritten and your page is not able to recognize the function autocomplete.

What I did was to comment out the reference to this file in my Site.master file:

 <asp:ScriptManager runat="server">
            <Scripts>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <%--  <asp:ScriptReference Name="jquery" /> --%>
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

aleha_84 · Accepted Answer · 2014-12-11 15:09:55Z

0

try this:

$("#parameter").autocomplete({
    minLength: 2,
    source: function (request, response) {
    $.ajax({
        url: "@Url.Action("Autocomplete", "Person")",
        type: "GET",
        dataType: "json",
        data: { 
            search: request.term,
        },
        success: function (data) {
            response($.map(data, function (item) {
                return { label: item.Name, value: item.Name, id: item.Id };
            }));
        }
    });
});

answered Dec 11, 2014 at 15:09

aleha_84

8,5892 gold badges42 silver badges50 bronze badges

1 Comment

Marijn Over a year ago

sadly still the same error that he doesn't recognise the autocomplete function but thanks for the answer :)

Collectives™ on Stack Overflow

jQuery UI autocomplete is not a function?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related