Object doesn’t support property or method ‘autocomplete’

I’ve seen this message before and it usually occurs for one of two reasons:

1) The jquery-ui.js file (which is required to get autocomplete working) wasn’t included in the page
2) The script file that contains your implementation of autocomplete occurs BEFORE the jquery-ui.js file

So if I have the following code in the script.js file to attach the autocomplete code to a textbox:

$("#User").autocomplete({
    source: function (request, response) {
        if (request.length < 4) {
            return;
        }
        var customer = new Array();
        $.ajax({
            async: false,
            cache: false,
            type: "POST",
            url: "http://localhost:1234/MyController/Autocomplete",
            data: { "term": request.term },
            success: function (data) {
                for (var i = 0; i < data.length ; i++) {
                    customer[i] = { label: data[i].Value, Id: data[i].Key };
                }
            }
        });
        response(customer);
    },
    select: function (event, ui) {
        $("#UserId").val(ui.item.Id);
    }
});

Your web page or view with the autocomplete functionality should look something like this. Note our script file is after the jquery-ui.js file:

@model UserVM

@{
    ViewBag.Title = "Cool Page";
}

http://~/Scripts/jquery-ui.js
http://~/Scripts/script.js

@using (Html.BeginForm("UserStuff", "MyController")) {
 @Html.EditorFor(model => model.User)
}
Advertisements

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: