JQuery UI AutoComplete: .data(...) is undefined [but only when I am add a second autocomplete box]

Question

I am using JQuery 1.8.3 and JQuery UI 1.8.24.

This is the code, that works just fine:

    $(function () {
        $("#").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '', type: "POST", dataType: "json",
                    data: { searchPattern: request.term },
                    cache: false,
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Label, value: item.Value, id: item.Id, description: item.Description }
                        }))
                    }
                });
            },
            delay: 300,
            minLength: 2,
            autoFocus: true
        })
        .data("autocomplete")._renderItem = function (ul, item) {
            return $("li>/li>")
            .data("ui-autocomplete-item", item)
            .append("a>" + item.label + "br>div style=\"font-size:x-small;font-style:italic;\">" + item.description + "/div>/a>")
            .appendTo(ul);
        };
    });

But if I add a second textbox to the HTML, copy the JavaScript above and change the selector and url (so in the end I have two autocomplete textboxes), then I get the following error for the second autocomplete:

TypeError: $(...).autocomplete(...).data(...) is undefined

With one autocomplete it works perfect, but with a second not I can't explain why. Does anyone can help me?

Thanks in advance!

Toby

EDIT:

I found the problem.

The JavaScript code is in an *.js file and the two textboxes are in two different *.thml files.

So there is only one textbox at a time and this is the problem.

Now I do the last part (with the data(...)) in the *.html file and it works fine:

$("#selector").autocomplete().data("autocomplete")._renderItem = renderItem;

Thank for your help!

Answer 1

There was a change in the data key naming convention in UI 1.9

jQuery 1.9/1.10 removed the key autocomplete and added uiAutocomplete

.data("uiAutocomplete")

Please note: according to latest Documentation (v1.10.x) it should be .data("ui-autocomplete") (see: http://jqueryui.com/autocomplete/#custom-data)