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

admin管理员组

文章数量:1289529

I am using JQuery 1.8.3 and JQuery UI 1.8.24.

This is the code, that works just fine:

    $(function () {
        $("#").autoplete({
            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("autoplete")._renderItem = function (ul, item) {
            return $("li>/li>")
            .data("ui-autoplete-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 autoplete textboxes), then I get the following error for the second autoplete:

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

With one autoplete 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").autoplete().data("autoplete")._renderItem = renderItem;

Thank for your help!

I am using JQuery 1.8.3 and JQuery UI 1.8.24.

This is the code, that works just fine:

    $(function () {
        $("#").autoplete({
            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("autoplete")._renderItem = function (ul, item) {
            return $("li>/li>")
            .data("ui-autoplete-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 autoplete textboxes), then I get the following error for the second autoplete:

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

With one autoplete 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").autoplete().data("autoplete")._renderItem = renderItem;

Thank for your help!

• javascript
• jquery
• jquery-ui
• autoplete

Share Improve this question Follow edited Oct 17, 2013 at 13:22 Toby asked Oct 17, 2013 at 12:25 TobyToby 7111 silver badge33 bronze badges 5

• You have invalid markup in return $("li>/li>"). Is that a typo? That could most certainly be causing issues too. – 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.. So I decide to remove the first "<". – Toby Commented Oct 17, 2013 at 13:07
• @Toby: You paste the code, select it, and then press Ctrl + K. Tada! – Amal Commented May 19, 2014 at 9:09
• I've posted my solution here: stackoverflow./a/53885800/4187751 – JeSa Commented Dec 21, 2018 at 13:49
• I've posted my solution here : stackoverflow./a/53885800/4187751 – JeSa Commented Dec 21, 2018 at 13:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

jQuery 1.9/1.10 removed the key autoplete and added uiAutoplete

.data("uiAutoplete")

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

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 auplete-ed did not exist! Try

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

and make sure it is not zero.

You can implement the below mentioned line

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

instate of

.data("autoplete")._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.

本文标签：