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

The people tell to try something like uiAutocomplete or autocomplete instead "ui-autocomplete", but so far I know, "ui-autocomplete" is right. — Paladini
– Paladini, Commented Sep 15, 2013 at 19:24

Paladini · Accepted Answer · 2013-09-17 13:39:11Z

2

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!

answered Sep 17, 2013 at 13:39

Paladini

4,58216 gold badges59 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mujahid Over a year ago

Thanks a lot for your solution. For some reason, it seems working :)

Paladini Over a year ago

Hhahaha, yes, I don't know why this works, but is a relief know that works. :)

Collectives™ on Stack Overflow

jQuery autocomplete data undefined error

1 Answer 1

I found the solution!

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

I found the solution!

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related