jQuery autocomplete data undefined error

Question

I am using jquery v 2.0.0 and jquery ui 1.10.3

Following is my jquery ui autocomplete code:

$nameField.combobox({
            source: people,
            buttonSelector: '.toggleList',
            focus: function () {
                return false;
            },
            select: function (event, ui) {
                $nameField.val(ui.item.name).data({
                    id: ui.item.id,
                    name: ui.item.name,
                    birthdate: ui.item.birthdate
                });
                return false;
            }
        }).data('ui-autocomplete')._renderItem = function (ul, item) {
            if (!_.include(self.idArr, item.id)) {
                return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
            }
        };

This was working perfectly in older version of jquery. But after the upgrade, when I click the .toggleList button, it opens the first time and there's another button to add the selected name to a div. After that when I click the `.toggleList' combo selector, the autocomplete is not opening. It gives me the following error:

Uncaught TypeError: Cannot call method 'data' of undefined jquery.ui.autocomplete.js?1376892069:527

Anyone came across any issues like this? I tried several fixes mentioned in other stackoverflow threads, but none of them are working for me.

Hope someone could help me to fix this bug

Thanks

Answer 1

I found the solution!

Somepeople think that "ui-autocomplete" is wrong, so them uses "autocomplete" or "uiAutocomplete", but that is wrong. Actually, "ui-autocomplete" is the right way to do this.

I have the same issue you have, and I find with a friend the problem of this code. Instead:

.data('ui-autocomplete')._renderItem = function (ul, item) {
            if (!_.include(self.idArr, item.id)) {
                return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
            }
        };

Use:

._renderItem = function (ul, item) {
            if (!_.include(self.idArr, item.id)) {
                return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
            }
        };

I think combobox and autocomplete returns a data('ui-autocomplete'), so if you type .data('ui-autocomplete') you're doing something like:

.data('ui-autocomplete').data('ui-autocomplete')

What's wrong....well, actually I don't know why this don't work and why without this works, but trust me, delete .data('ui-autocomplete') and be happy!