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!

You have invalid markup in return $("li>/li>"). Is that a typo? That could most certainly be causing issues too. — Andrew Whitaker
– Andrew Whitaker, Commented Oct 17, 2013 at 12:40
Yes I know. That's only because I didn't know how to post HTML-Tags at stackoverflow.com. So I decide to remove the first "<". — Toby
– Toby, Commented Oct 17, 2013 at 13:07
@Toby: You paste the code, select it, and then press Ctrl + K. Tada! — Amal
– Amal, Commented May 19, 2014 at 9:09
I've posted my solution here: stackoverflow.com/a/53885800/4187751 — JeSa
– JeSa, Commented Dec 21, 2018 at 13:49
I've posted my solution here : stackoverflow.com/a/53885800/4187751 — JeSa
– JeSa, Commented Dec 21, 2018 at 13:51

kieste · Accepted Answer · 2014-05-17 22:56:59Z

6

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)

edited May 17, 2014 at 22:56

kieste

5331 gold badge5 silver badges19 bronze badges

answered Oct 17, 2013 at 12:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

Toby Over a year ago

Thanks, but I tested that already. I am also using JQuery 1.8.3 and JQuery UI 1.8.24.

Arun P Johny Over a year ago

@Toby your selector $("#") could the also a problem... looks like you missed id after #

Toby Over a year ago

Thanks! I found the problem, see above. Thanks for your help!

Ronin Over a year ago

it's actually .data('ui-autocomplete') rather than .data('uiAutocomplete'). Please correct it.

Tahir Hassan · Accepted Answer · 2014-03-04 13:10:34Z

1

The other day, I encountered the same issue, but it had nothing to do with the version I was using but simply that the element being aucomplete-ed did not exist! Try

alert($('...').length);

and make sure it is not zero.

answered Mar 4, 2014 at 13:10

Tahir Hassan

5,8976 gold badges50 silver badges68 bronze badges

Comments

Pratik Joshi · Accepted Answer · 2015-09-15 07:55:08Z

0

You can implement the below mentioned line

.autocomplete( "instance" )._renderItem = function( ul, item ) {

instate of

.data("autocomplete")._renderItem = function (ul, item) {

as per the documentation available at Jquery site JQuery AutoComplete Funtionality you will find this code.

from upgraded version of jquery 1.10 they have made change in code. hope this will help you.

answered Sep 15, 2015 at 7:55

Pratik Joshi

2582 gold badges6 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related