javascript - JQuery UI 自动完成选择返回未定义

Question

我已经认真搜索了几个小时，但我似乎不知道我需要做什么。我在 JQuery UI 1.8.16 中使用旧版本的自动完成功能。在你悲伤地问之前，我无法升级它。我正在尝试设置自定义数据显示，因此我使用文档中的“自定义数据”示例。我的代码按照示例期望的格式正确构建，但是我添加了一些我需要的其他键。我的结构类似于我在此 jsBin 中提供的结构。 http://jsbin.com/zut/1/edit

我需要重写选择和聚焦功能。遵循示例后。我为模板部分定义了这段代码。

        .data("autocomplete")._renderItem = function(ul, item) {
                var template;
                if (item.isActive === true) {
                    template = "<a>" + item.label + item.desc + item.status + "</a>";
                } else {
                    template = "<a >" + item.label + item.desc  + "<span class='inactive'>" + item.status 
                    + "</span></a>";
                }

                return $("<li>")
                    .append(template) // .append("<a>" + item.label + item.desc + "</a>")
                    .appendTo(ul);
        };
    },

这使得模板很好，但是我在选择中收到“ui”参数的“未定义”，并特别关注“TypeError:ui.item未定义”

我尝试将 .data("autocomplete") 更改为 .data("ui-autocomplete") 这将摆脱“TypeError: ui.item is undefined”，但是现在所有额外的模板数据都消失了，我' m 仅显示标签。

我把它放回去，然后使用 ._renderItemData 与 ._renderItem 搞乱，结果与上面相同。原始错误消失了，但是所有额外的文本都消失了。

我有点不知所措，非常感谢任何和所有的帮助!我只是想显示额外的自定义文本，同时仍然覆盖选择和焦点值。到目前为止，我发现的所有“修复”似乎都解决了一个问题，但破坏了所有“自定义数据”。

Answer 1

您缺少将数据设置到 li 的设置

.data("autocomplete")._renderItem = function (ul, item) {
    var template;
    if (item.isActive === true) {
        template = "<a>" + item.label + item.desc + item.status + "</a>";
    } else {
        template = "<a >" + item.label + item.desc + "<span class='inactive'>" + item.status + "</span></a>";
    }

    return $("<li>")
        //missing this
        .data( "item.autocomplete", item )
        .append(template)
        .appendTo(ul);
};

演示:Fiddle

查看原始实现 http://code.jquery.com/ui/1.8.16/jquery-ui.js该数据值已设置