JQuery UI AutoComplete:.data(..） 未定义 [但仅当我添加第二个自动完成框时]

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

本文关键字：第二个 添加 data AutoComplete UI 未定义 JQuery      更新时间：2023-09-26

我正在使用JQuery 1.8.3和JQuery UI 1.8.24。

这是代码，工作得很好：


    $(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);
        };
    });

但是，如果我在 HTML 中添加第二个文本框，复制上面的 JavaScript 并更改选择器和 url（所以最后我有两个自动完成文本框），那么第二个自动完成会出现以下错误：

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

使用一个自动完成功能，它可以完美运行，但第二个则不然我无法解释为什么。有人可以帮助我吗？

提前感谢！

托比

编辑：

我发现了问题。

JavaScript 代码位于 *.js 文件中，两个文本框位于两个不同的 *.thml 文件中。

所以一次只有一个文本框，这就是问题所在。

现在我在 *.html 文件中做最后一部分（使用 data（...）），它工作正常：

$("#selector").autocomplete().data("autocomplete")._renderItem = renderItem;

感谢您的帮助！

UI 1.9 中的数据键命名约定发生了变化

jQuery 1.9/1.10 删除了密钥autocomplete并添加了uiAutocomplete 

.data("uiAutocomplete")

请注意：根据最新的文档（v1.10.x），它应该是.data（"ui-autocomplete"） （见：http://jqueryui.com/autocomplete/#custom-data）

前几天，我遇到了同样的问题，但它与我使用的版本无关，而只是因为 aucomplete ed 的元素不存在！尝试

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

并确保它不为零。

你可以实现下面提到的行

.autocomplete（ "instance" ）._renderItem = function（ ul， item ） {

状态

.data（"autocomplete"）._renderItem = function （ul， item） {

根据Jquery站点JQuery自动完成功能上提供的文档，您将找到此代码。

从JQuery 1.10的升级版本开始，他们对代码进行了更改。希望这对你有帮助。

相关文章：