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, Oct 17 '13 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, Oct 17 '13 at 13:07
@Toby: You paste the code, select it, and then press Ctrl + K. Tada! — Amal Murali, May 19 '14 at 09:09
I've posted my solution here: https://stackoverflow.com/a/53885800/4187751 — JeSa, Dec 21 '18 at 13:49
I've posted my solution here : https://stackoverflow.com/a/53885800/4187751 — JeSa, Dec 21 '18 at 13:51

score 6 · Answer 1 · edited May 17 '14 at 22:56

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 '14 at 22:56

kieste

513
1
4
19

answered Oct 17 '13 at 12:31

Arun P Johny

384,651
66
527
531

Thanks, but I tested that already. I am also using JQuery 1.8.3 and JQuery UI 1.8.24. – Toby Oct 17 '13 at 13:05
@Toby your selector `$("#")` could the also a problem... looks like you missed id after `#` – Arun P Johny Oct 17 '13 at 13:10
Thanks! I found the problem, see above. Thanks for your help! – Toby Oct 17 '13 at 13:23
it's actually `.data('ui-autocomplete')` rather than `.data('uiAutocomplete')`. Please correct it. – Ronin Feb 05 '15 at 09:49

score 1 · Answer 2 · answered Mar 04 '14 at 13:10

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 04 '14 at 13:10

Tahir Hassan

5,715
6
45
65

score 0 · Answer 3 · answered Sep 15 '15 at 07:55

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.

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

3 Answers3